Показать Меню
falbar Запрет обтекания на CSS

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

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

При верстке страницы сайта частой задачей является запрет обтекания, и каждый решает эту задачу сам, в зависимости от ситуации. Сегодня я расскажу о трех способах, при помощи которых можно запретить обтекание свойства 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;
	}

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

Три блока div

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

.block1,
.block2,
.block3{
	float: left;
}

После применения float

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

<div class="container1">
	<div class="block1">1</div>
	<div class="clear"></div>
</div>

Первый способ свойство clear

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

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

.container2{
	overflow: auto;
}

Второй вариант свойство overflow

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

.container3:after{
	content: '';
	display: block;
	clear: both;
	height: 2px;
	background-color: #000; 
}

Трений способ псевдо элемент after

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

Подписаться на обновления

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