Багфикс float

Проваливание плавающих блоков сквозь родителя решается многими методами, покажу несколько из них.

Блок .clearfix

Старейший и максимально кроссбраузерный (но не семантичный), это clearfix. В CSS создаём класс .clearfix.

.clearfix {
	clear:both;
}

HTML-код модифицируем следующим образом:

	<div class="outer">
		<div class="leftcol">

			<p>Вне этой ... <!-- здесь много текста. Вы его копируйте полностью, я не буду --> ... расположены.</p>

			<p>Нельзя решить ... <!-- здесь много текста. Вы его копируйте полностью, я не буду --> галактики.</p>

		</div>
		<div class="rghtcol">

			<p>Источников ... <!-- здесь много текста. Вы его копируйте полностью, я не буду --> останется.</p>

		</div>
		<div class="clearfix"></div>
	</div>
	<div class="outer">
		<div class="leftcol">

			<p>Вне этой ... <!-- здесь много текста. Вы его копируйте полностью, я не буду --> ... расположены.</p>

			<p>Нельзя решить ... <!-- здесь много текста. Вы его копируйте полностью, я не буду --> галактики.</p>

		</div>
		<div class="rghtcol">

			<p>Источников ... <!-- здесь много текста. Вы его копируйте полностью, я не буду --> останется.</p>

		</div>
		<div class="clearfix"></div>
	</div>

Псевдокласс :after

У каждого элемента может быть псевдокласс :before и :after. Псевдокласс не является самостоятельным HTML-элементом и привязан к тому тегу, к которому он назначен в CSS. Изначально они предназначены для того, чтобы вмещать в себя повторяющийся контент, например, чтобы вставить какие-то символы в начале каждого параграфа. Например:

ul.dashed {margin-left:35px;margin:0 0 18px 0;list-style-type:none;}
ul.dashed li:before {content:" — ";}

Попробуем в действии:

<ul class="dashed">
	<li>Первый элемент списка</li>
	<li>Второй элемент списка</li>
	<li>Третий элемент списка</li>
</ul>

Из увиденного можно сделать вывод: псевдоэлементы :before и :after на деле ведут себя как строчные элементы, а значит, чтобы обеспечить обтекание, нужно сделать псевдокласс блочным.

.outer:after {
	content:""; /* Если свойство content не указать, то псевдоэлемент не инициализируется */
	display:block;
	clear:both;
}

Листинг HTML (почти то же самое, что в предыдущем примере, но без блоков .clearfix):

	<div class="outer">
		<div class="leftcol">

			<p>Вне этой ... <!-- здесь много текста --> ... расположены.</p>

			<p>Нельзя решить ... <!-- здесь много текста --> галактики.</p>

		</div>
		<div class="rghtcol">

			<p>Источников ... <!-- здесь много текста --> останется.</p>

		</div>
	</div>
	<div class="outer">
		<div class="leftcol">

			<p>Вне этой ... <!-- здесь много текста --> ... расположены.</p>

			<p>Нельзя решить ... <!-- здесь много текста --> галактики.</p>

		</div>
		<div class="rghtcol">

			<p>Источников ... <!-- здесь много текста --> останется.</p>

		</div>
	</div>

Результат:

Свойство overflow

Свойство, заведующее отображением непомещающегося содержимого, тоже может заставить блок-оболочку обтекать плавающие блоки. Способ c overflow точно не следует применять, если у блока оболочки планируется повесить на один из углов так любимый маркетологами лэйбл типа «bestseller», или «скидка 50%», или что-то другое в этом роде. Т.к. лэйбл будет выступать за границы блока и либо обрежется, либо создаст полосу прокрутки. CSS код:

.outer {
	width:100%; /* Без явного указания ширины overflow:hidden не сработает */
	overflow:hidden;
}
.leftcol {
	float:left;
	width:48%;
}
.rghtcol {
	float:right;
	width:48%;
}

Альтернативный вариант CSS:

.outer {
	overflow:auto; /* В некоторых ситуациях метод может давать нежелательную полосу прокрутки в блоке */
}
.leftcol {
	float:left;
	width:48%;
}
.rghtcol {
	float:right;
	width:48%;
}

HTML без изменений:

	<div class="outer">
		<div class="leftcol">

			<p>Вне этой ... <!-- здесь много текста --> ... расположены.</p>

			<p>Нельзя решить ... <!-- здесь много текста --> галактики.</p>

		</div>
		<div class="rghtcol">

			<p>Источников ... <!-- здесь много текста --> останется.</p>

		</div>
	</div>
	<div class="outer">
		<div class="leftcol">

			<p>Вне этой ... <!-- здесь много текста --> ... расположены.</p>

			<p>Нельзя решить ... <!-- здесь много текста --> галактики.</p>

		</div>
		<div class="rghtcol">

			<p>Источников ... <!-- здесь много текста --> останется.</p>

		</div>
	</div>

Результат выполнения кода.

Наиболее приемлемым вариантом является второй метод, на основе псевдокласса. Первый метод является совместимым с фреймворком Bootstrap.