разница cler:both

[conformist]

скажите, в чем принципиальная разница между этими двумя способами?

<div style="clear:both"></div>

и

Код HTML
1
 <div class="clear"></div>
Код CSS
1
.clear {clear:both; content:""; display:block; height:0; font-size:0; visibility:hidden;}

кроме длины записи и наличием ненужных правил

[DownHouse]

В том что стили вынесены в css.

Принципиальной разницы нет.

[Rush]

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

[conformist]

то есть о кроссбраузерности тут речи не идет? мне сказали, что первый способ - хуже, так как не везде работает, хотя наличие ненужных правил мне кажется никак не улучшит ситуацию. тем более, что используется атрибут предназначенный для псевдо-классов

[mrnobody]

В первом случае создается пустой элемент, в него никакой контент не вставляют, а способ с использованием псевдоэлемента обходится без создания пустого элемента с помощью HTML и в него (div) можно вставить контент, , но он не подходит для IE7 (могу ошибаться)

[hedgehog]

скажите, в чем принципиальная разница между этими двумя способами?

<div style="clear:both"></div>

и

Код HTML
1
 <div class="clear"></div>
Код CSS
1
.clear:after {clear:both; content:""; display:block; height:0; font-size:0; visibility:hidden;}

кроме длины записи и наличием ненужных правил

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

PS: исправил ошибку в коде..

[Catherine]

но он не подходит для IE7 (могу ошибаться)

Для IE7 достаточно задать hasLayout (например, указать zoom: 1;) родителю.

[mishka]

Вот лучше вариант очистки:

.clearfix {
	zoom: 1;
}
.clearfix:after,
.clearfix:before {
	content: "";
	display: table;
}
.clearfix:after {
	clear: both;
}

conformist знайте оба варианта и применяйте по ситуации.

<div style="clear:both"></div> Использовал только пару раз.

conformist, в случае когда очистка выносится в стили, то не создается пустой блок, а эти стили применяются к родителю:

<div class="parent clearfix">
	<div class="child1" style="float: left">

	</div>
	<div class="child2">

	</div>
</div>
очистка происходит благодаря добавлению класса на родителя

и второй вариант:

<div class="parent">
	<div class="child1" style="float: left">

	</div>
	<div class="child2">

	</div>
	<div style="clear: both"></div>
</div>
очищает пустой блок у которого стили clear: both.

можно так:

<style>
	.clear {
		clear: both;
	}
</style>

<div class="parent">
	<div class="child1" style="float: left">

	</div>
	<div class="child2">

	</div>
	<div class="clear"></div>
</div>
то же что и в предыдущем варианте, только стили отдельно. Вместо инлайновых стилей класс.

[conformist]

то есть если использовать позиционирование в независимых блоках (header, footer, content), то лучше дочерние элементы позционировать, а родительскому присваивать clear?