Новый способ очистки float
Сегодня мы рассмотрим совершенно новый способ очистки обтекания float. Это прогресс в области сайтостроения, позволяет существенно сократить html код, избавиться от одного элемента, что само по себе уже не может не радовать:) Это превосходно и замечательно!
О чем речь?
Рассмотрим на популярном примере. Нам требуется создать блок, где будут выводиться 5 последних новостей и ссылка на все новости. Внешний вид:
Задача понятна. Формируем разметку:
<div class="block"> <ul> <li><a href="">Новость №1</a></li> <li><a href="">Новость №2</a></li> <li><a href="">Новость №3</a></li> <li><a href="">Новость №4</a></li> <li><a href="">Новость №5</a></li> </ul> <a href="" class="float-button">Все новости</a> </div>
Без стилей это выглядит так:
Теперь добавим стили:
.block { width:200px; background-color:#999; } .block ul { list-style:none; } .block ul li { padding:5px; } .block a { color:#fff; text-decoration:none; }
В итоге у нас получается что-то типа такого:
Осталось только кнопку "Все новости" переместить к правому краю. Как это сделать? Конечно же float:right; Пробуем. Добавим стиль:
.block a.float-button { float:right; color:red; }
И что у нас получилось?
Но это же неправильно! Почему так получилось? Все правильно, это из-за свойства float:right, которое мы присвоили к нашей кнопке. Как заставить серый фон заканчиваться после нее? Раньше это решалось с помощью ввода дополнительного элемента <div class="clear"></div>, который размещался после нашей кнопки "Все новости", этому элементу назначались стили: clear:both; width:1px; height:1px и все работало. Но сегодня мы обойдемся без него. Добавим в стили следующий код:
.block:after { content:""; display:block; clear:both; }
Проверяем результат:
Ура, работает! И это здорово. Работает в IE 7+ и во всех остальных браузерах. Это супер-кроссбраузерное решение проблемы с обтеканием.
Приведу полный код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Новый способ очистки float</title> <style> .block { width:200px; background-color:#999; } .block ul { list-style:none; } .block ul li { padding:5px; } .block a { color:#fff; text-decoration:none; } .block a.float-button { float:right; color:red; } .block:after { content:""; display:block; clear:both; } </style> </head> <body> <div class="block"> <ul> <li><a href="">Новость №1</a></li> <li><a href="">Новость №2</a></li> <li><a href="">Новость №3</a></li> <li><a href="">Новость №4</a></li> <li><a href="">Новость №5</a></li> </ul> <a href="" class="float-button">Все новости</a> </div> </body> </html>