При верстке страницы сайта частой задачей является запрет обтекания, и каждый решает эту задачу сам, в зависимости от ситуации. Сегодня я расскажу о трех способах, при помощи которых можно запретить обтекание свойства 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;
}
В итоге получится вот такая картина:
Преминем к пронумерованным блокам свойство float:
.block1,
.block2,
.block3{
float: left;
}
Первый способ заключается в использование свойства clear со значением both к ниже лежащему блочному элементу.
<div class="container1">
<div class="block1">1</div>
<div class="clear"></div>
</div>
Это распространённый вариант, и я им раньше часто пользовался, хотя, на мой взгляд, он и не самый лучший. Согласитесь, когда продумываешь разметку для HTML страницы, то не хочется использовать лишние элементы, не вписывающиеся в логику.
Второй способ не требует добавления не нужного HTML кода. Для того чтобы им воспользоваться необходимо прописать всего одну строчку к контейнеру - overflow со значением auto. Есть только один минус, после использования этого способа: лежащий внутри контент нельзя будет вынести за приделы блока-обвертки, что будет очень неудобно, когда понадобится что-нибудь спозиционировать относительно контейнера за его приделы.
.container2{
overflow: auto;
}
Третий способ, по моему мнению, самый оптимальный. Он обладает достоинствами первого и второго способов: отсутствием ненужных элементов и использованием свойства clear. Для его реализации необходимо воспользоваться псевдо элементам after. При помощи него можно сымитировать элемент div. Чтобы увидеть его укажем фон и высоту изменим с 0 до 2px.
.container3:after{
content: "";
display: block;
clear: both;
height: 2px;
background-color: #000;
}
Вот так можно в CSS запретить обтекание. Возможно, есть ещё способы для решения этой задачи, было бы интересно узнать. Пишите в комментариях, свои варианты.