falbar Запрет обтекания тремя способами на CSS

Запрет обтекания тремя способами на CSS

24 июля 2014 5796 0

При верстке страницы сайта частой задачей является запрет обтекания, и каждый решает эту задачу сам, в зависимости от ситуации. Сегодня я расскажу о трех способах, при помощи которых можно запретить обтекание свойства float.

Реклама

Для примера добавим на страницу HTML код, который будет включать в себя три блока обвертки и три пронумерованных блока внутри:

<div class="container1">
  <div class="block1">1</div>
</div>
<div class="container2">
   <div class="block2">2</div>
</div>
<div class="container3">
   <div class="block3">3</div>
</div>

Теперь укажем общие стили им:

.container1,
.container2,
.container3{
    width: 70%;
 margin: 15px auto 0;
    background-color: #CCFFCC;
  border: 2px solid #ccc;
 padding:20px;
}
  .block1,
    .block2,
    .block3{
        padding-top: 35px;
      text-align: center;
     font-size: 28px;
        text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
        background-color: #CCCCFF;
      height: 65px;
       width: 100px;
   }

В итоге получится вот такая картина:

tri-bloka-div

Преминем к пронумерованным блокам свойство float:

.block1,
.block2,
.block3{
   float: left;
}
posle-primeneniya-float

Первый способ заключается в использование свойства clear со значением both к ниже лежащему блочному элементу.

<div class="container1">
 <div class="block1">1</div>
   <div class="clear"></div>
</div>
pervyj-sposob-svojstvo-clear

Это распространённый вариант, и я им раньше часто пользовался, хотя, на мой взгляд, он и не самый лучший. Согласитесь, когда продумываешь разметку для HTML страницы, то не хочется использовать лишние элементы, не вписывающиеся в логику.

Второй способ не требует добавления не нужного HTML кода. Для того чтобы им воспользоваться необходимо прописать всего одну строчку к контейнеру - overflow со значением auto. Есть только один минус, после использования этого способа: лежащий внутри контент нельзя будет вынести за приделы блока-обвертки, что будет очень неудобно, когда понадобится что-нибудь спозиционировать относительно контейнера за его приделы.

.container2{
 overflow: auto;
}
vtoroj-variant-svojstvo-overflow

Третий способ, по моему мнению, самый оптимальный. Он обладает достоинствами первого и второго способов: отсутствием ненужных элементов и использованием свойства clear. Для его реализации необходимо воспользоваться псевдо элементам after. При помощи него можно сымитировать элемент div. Чтобы увидеть его укажем фон и высоту изменим с 0 до 2px.

.container3:after{
    content: "";
  display: block;
 clear: both;
    height: 2px;
    background-color: #000;
}
trenij-sposob-psevdo-element-after

Вот так можно в CSS запретить обтекание. Возможно, есть ещё способы для решения этой задачи, было бы интересно узнать. Пишите в комментариях, свои варианты.

Реклама
Комментариев еще не оставлено
no_avatar