mex

Есть несколько способов вернуть плавающий элемент в нормальный поток. Или, говоря простым языком, заставить див «папку» нормально обжимать див (или какой другой элемент) «сынку» со свойством float.

Самый старый и самый первый — после «флоата» впулить:

 
<div class="box">
   <div class="left"></div>
   <div class="right"></div>
   <div class="clear"></div>
</div>  

 
.clear {
   clear:both;
   font-size:0; /* для ие */
   height:0;
}  

Можно и тег <p> и <br>, тут уж как кому на душу ляжет. Не суть. Суть в том, что ломает засорять код дополнительными включениями.

Второй способ бодрее и долгое время я пользовался именно им. Суть в использовании псевдо класса :after, коим можно добавить символ, к примеру точку, и установить для него clear:both, а также display:block, чтобы на всю ширину, и умело скрыть его посредством height:0 и visibility:hidden.

 
<div class="box">
   <div class="left"> </div>
   <div class="right"> </div>
</div›  

 
.box:after {
   content: ".";
   display: block;
   height: 0;
   clear: both;
   visibility: hidden;
}  

Естественно под семейкой адамсов-эксплореров 6 и 7 (ниже не рассматриваю в принципе) сие не работает. Зато работают другие методы.

Для ИЕ7 — это min-height:1%;, объявление, которое смело можно добавить к нашему предыдущему css

 
.box {
   min-height:1%; /*здравствуй ИЕ7*/
}  

Для ИЕ6 надо писать отдельно. min-height, min-width он не понимает. Зато, как выяснилось, отлично понимает просто height. Которое, персонально он, трактует как min-height все остальные браузеры. Так что специально для него пропишем правило

 
* html .box {
    height:1%; /*здравствуй ИЕ6*/
}  

Лучше, конечно, вынести стили для ие, в отдельный файл, но иногда лень. Красота хака со звездочкой заключается в том, что выше элемента html нет ничего. Дальше только вселенская пустота. И ни один браузер, ни при каких условиях не воспримет это правило. Даже ИЕ7. Но ИЕ6 — это не совсем браузер. Это неандерталец, злой волей Гейтса прописавшийся на компьютерах пользователей, и до сих пор возносящий аумы лени и неграмотности со многих машин. Он считает, что выше тега html есть еще один мистический тег, к которому и аппелирует.

Короче говоря, собранное правило выглядит так

 
.box:after {
   content: ".";
   display: block;
   height: 0;
   clear: both;
   visibility: hidden;
}
.box {
   min-height:1%; /*здравствуй ИЕ7*/
}
* html .box {
   height:1%; /*здравствуй ИЕ6*/
}  

Но, честно говоря, и это правило нагоняет тоску. Длинное и обидное для нормальных браузеров. То ли дело новое, красивое правило overflow:hidden

Видел я его не раз, но, признаться, ленился попробовать и начать юзать, а как-то раз, нашел коротенькое описание. Думаю, а фигли не попробовать, на самом деле. Взял, попробовал. Понравилось. Чуть модернизировал для себя. И получилось следующее

 
.box {
   overflow: hidden;
   min-height:1%; /*оставил для ИЕ7, чтобы на всякий случай ))) */
}
* html .box {
   height:1%; 
   overflow:visible; /* ИЕ отлично справлялся и прежде.*/
}  

Самое прикольное — что все пишут, что для ие надо задавать ширину. Я не задавал, не задаю и ничего страшного не происходит. Если кто подгонит пример, скажу спасибо.

Кстати, этот, последний вариант возвращения в родные пенаты нормального потока раскрывает кучу интересных моментов. Если будет не лень, напишу вослед.