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

24 июля 2014 Антон Кулешов 2101 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
Читайте далее

Выпадающее меню на HTML и CSS

28 января 2015 Антон Кулешов

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

Улучшенная подсветка кода от prism

11 февраля 2015 Антон Кулешов

Доброго времени суток, читатели falbar и гости, зашедшие на эту страницу. В сегодняшней статье я хочу рассказать о том, как подключить к себе на сайт подсветку кода, а именно, плагин под названием prism. Мы разберём не только саму библиотеку, но и, чуть-чуть, затронем back-end.

Всплывающие окна на jQuery за 3 минуты

8 сентября 2014 Антон Кулешов

Сегодня я расскажу о том, как сделать всплывающие окна на jQuery потратив на это 3 минуты своего времени. Данное решение будет включать в себя минимум кода.