[b]css:[/b]

[code]

.floatElement:after {

visibility: hidden;

display: block;

clear: both;

content: " ";

height: 0;

}

/* хаки для IE6,7 */

* html .floatElement {

height: 1%;

}

*:first-child+html .floatElement {

min-height: 1px;

}

ul.test {

padding: 5px;

border: 1px solid red;

}

ul.test > li {

margin: 5px;

width: 25px;

height: 25px;

background: blue;

float: left;

}

[/code]

[b]html: (не работает)[/b]

[code]

[/code]

[b]html: (работает)[/b]

[code]

[/code]

По моему очень удобно, одна строчка и валидно. :)

.container:after {

display:block;

clear:both;

content:"";

}

/* Если нужно, для IE 6 включаем haslayout */

* html .container {height:1%;}

Эффект такой, как при первом способе, но не нужно «лезть» в HTML.

Про четвертый способ в посте сказано: «Кроме того, это единственный метод, который применяется непосредственно к плавающему элементу, а не к его родителю.» Но это тоже не всегда удобно. Очень часто верстальщик не знает, что клиент в последствии «напихает» в блоки. В таких случаях лучше, чтобы соответствующие свойства были заданы для родителя плавающих блоков (если клиент добавит плавающие блоки, то ничего не развалится)

Сейчас же он больше не поддерживает устаревший IE/Mac и убрали лишнюю «.» из контента (чтобы пользователи речевых браузеров не слышали после плавающих блоков что-то типа «интересный контент...точка...описание картинки...точка... »).

Так что, в новых проектах, можно смело заменить этот код на тот, что представлен под номером 4 и снова быть на волне современных тенденций в верстке :)

1
2
3
4
5
6
7
8
9
10
11
12
13
14

.clearfloat:after {
	content:".";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
}
.clearfloat {
	display:inline-block;
}
/* Hides from IE-mac \*/
* html .clearfloat {height:1%;}
*+html .clearfloat {height:1%;}
.clearfloat {display:block;}

Хотя у меня вообще это все идет обычно одной строчкой...

Сильно напоминает третий вариант, с небольшими изменениями.

Соглашусь с Q-Zma — сейчас оправданнее выносить весь мусор для IE 6 и 7 в условные комментарии (можно даже в один файл). У всех последних версий «смотрелок» все более-менее предсказуемо и им вполне может хватить одного стилевого файла.