Q-Zma’s Burrow

Очень часто приходится использовать поплавки, при этом ещё чаще возникает необходимость обрамления их родительским элементом. В соответствии со спецификацией HTML, блок, вмещающий в себя поплавки, их не обрамляет. Стандартным решением этой проблемы является добавление невидимого элемента после поплавков с установкой свойства clear, однако, это нарушает семантику кода, добавляется какой-то никому нафиг не нужный элемент, который не несёт никакой смысловой нагрузки. Ну и мать его так, не нужен он нам больше. Совсем:

<style type="text/css">
ul.menu
{
	display:block;
	list-style:none;
	margin:0;
	padding:0;
}
ul.menu li
{
	float:left;
	width:25%;
	text-align:center;
}
ul.menu:after
{
	/* для "нормальных" браузеров */
	content:".";
	display:block;
	height:0px;
	font-size:0px;
	line-height:0px;
	overflow:hidden;
	clear:both;
	visibility:hidden;
}
ul.menu
{
	height:1%;
}
html>/**/body ul.menu {
	height:auto !important;
}
</style>
<ul class="menu">
	<li>One</li>
	<li>Two</li>
	<li>Three</li>
	<li>Four</li>
</ul>