При верстке страницы сайта частой задачей является запрет обтекания, и каждый решает эту задачу сам, в зависимости от ситуации. Сегодня я расскажу о трех способах, при помощи которых можно запретить обтекание свойства 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](https://api.falbar.one/storage/images/608/41d/8ee/wrw2wp6z9-tri-bloka-div.jpg)
Преминем к пронумерованным блокам свойство float:
.block1,
.block2,
.block3{
float: left;
}
![posle-primeneniya-float](https://api.falbar.one/storage/images/608/41d/8ee/dlworrq5r-posle-primeneniya-float.jpg)
Первый способ заключается в использование свойства clear со значением both к ниже лежащему блочному элементу.
<div class="container1">
<div class="block1">1</div>
<div class="clear"></div>
</div>
![pervyj-sposob-svojstvo-clear](https://api.falbar.one/storage/images/608/41d/8ee/hosyajb0u-pervyj-sposob-svojstvo-clear.jpg)
Это распространённый вариант, и я им раньше часто пользовался, хотя, на мой взгляд, он и не самый лучший. Согласитесь, когда продумываешь разметку для HTML страницы, то не хочется использовать лишние элементы, не вписывающиеся в логику.
Второй способ не требует добавления не нужного HTML кода. Для того чтобы им воспользоваться необходимо прописать всего одну строчку к контейнеру - overflow со значением auto. Есть только один минус, после использования этого способа: лежащий внутри контент нельзя будет вынести за приделы блока-обвертки, что будет очень неудобно, когда понадобится что-нибудь спозиционировать относительно контейнера за его приделы.
.container2{
overflow: auto;
}
![vtoroj-variant-svojstvo-overflow](https://api.falbar.one/storage/images/608/41d/8ee/g1hjyqggs-vtoroj-variant-svojstvo-overflow.jpg)
Третий способ, по моему мнению, самый оптимальный. Он обладает достоинствами первого и второго способов: отсутствием ненужных элементов и использованием свойства clear. Для его реализации необходимо воспользоваться псевдо элементам after. При помощи него можно сымитировать элемент div. Чтобы увидеть его укажем фон и высоту изменим с 0 до 2px.
.container3:after{
content: "";
display: block;
clear: both;
height: 2px;
background-color: #000;
}
![trenij-sposob-psevdo-element-after](https://api.falbar.one/storage/images/608/41d/8ee/qbq2fggru-trenij-sposob-psevdo-element-after.jpg)
Вот так можно в CSS запретить обтекание. Возможно, есть ещё способы для решения этой задачи, было бы интересно узнать. Пишите в комментариях, свои варианты.