clear: left; clear: right; clear: both;

Основная проблема шаблонов на основе "плавающих" (float) колонок заключается в том, что контейнер, содержащий такие блоки просто так не пожелает растягиваться по их высоте. Если, скажем, вы захотите добавить рамку вокруг этого контейнера, то придётся каким-то образом заставить браузер растянуть его на высоту содержимого.

Левая колонка.

Левая колонка.

Левая колонка.

Левая колонка.

Правая колонка.

Правая колонка.

Правая колонка.

Это можно сделать либо путём добавления дополнительных элементов в HTML-код, либо используя псевдокласс :after, который не поддерживается Internet Explorer`ами и поэтому не интересен на практике.

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

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

HTML


<div class="container">
	<div class="left">
		<p>Левая колонка.</p>
		<p>Левая колонка.</p>
		<p>Левая колонка.</p>
		<p>Левая колонка.</p>
	</div>
	<div class="right">
		<p>Правая колонка.</p>
		<p>Правая колонка.</p>
		<p>Правая колонка.</p>
	</div>
<div class="clear"></div>
</div>

CSS


div.container {
	border: 1px solid #000;
	overflow: hidden;
	width: 100%;
}

div.left {
	width: 45%;
	float: left;
}

div.right {
	width: 45%;
	float: right;
}

div.clear {
	clear: both;
}

Clearing floats



Много комментариев (36) к “clear: left; clear: right; clear: both;”

  1. vladfrandom :

    вместо overflow: hidden; лучше overflow: auto; не так категорично, а эффект остается.

    но лучше:
    div.container:after {
    content:”";
    display:block;
    height:0;
    overfloww:hidden;
    clear:both;
    }


  2. stikhomirov :

    Может так, как  Вы предложили, и лучше, но вот только проклятый IE не понимает ни “after”, ни “content” :(


  3. Vii :

    stikhomirov:
    a) можно “эмулировать” :after через expression (не очень удачная идея в данном случае)
    b) для если добавить для контейнера hasLayout-флаг (zoom:1, height:1%, min-height:1% и т.д.) то эффект будет такой же как и :after


  4. vladfrandom :

    ok. исправляем и вот полный вариант для .container:
    div.container {
    border: 1px solid #000;
    }
    div.container:after {
    content:”;
    display:block;
    height:0;
    overfloww:hidden;
    clear:both;
    }
    * html div.container{height:1%;}


  5. Ёжик :

    .container{overflow:hidden; display:block!important; display:inline-block;}


  6. denlex :

    СПС!
    Именно это и искал.


  7. Dimox :

    Если для div.container не нужны отступы (padding) слева/справа, то я использую вариант, как в статье. Если же отступы нужны, то использую вариант товарища vladfrandom.


  8. Vii :

    vladfrandom:

    Тогда для ie7 (который “не понимает” “:after” и “* html”) еще добавте
    *+html div.containe{ min-height:1% }

    В итоге мы получили .clearfix из http://www.pathf.com/blogs/2007/09/developers-note-2/ :))


  9. Ambientos :

    Тема-то заезженная. Всего два вменяемых способа – overflow да :after.
    Для IE zoom: 1; height: 1%
    Ничего нового больше не предумаешь.


  10. Curly Brace :

    А чем плох clearfix?


  11. Curly Brace :

    Собственно его и привел в пример vladfrandom


  12. Влад :

    Бесспорно, получилась новость


  13. Serg :

    Вы нашли хорошее решение этой проблемы, так держать.


  14. Octane :

    Обычно хватает следующего кода:
    #conteiner:after {
    display: block;
    clear: both;
    content: ""
    }

    и для IE в отдельном файле:
    #conteiner {
    zoom: 1;
    }

    Только нужно быть внимательным с вертикальными отступами в Opera, при таком способе они магическим образом пропадают в некоторых местах :-)


  15. duwegub :

    Спасибо за проделанную работу , мне как вап мастеру пригодится.


  16. Karim :

    Огромное спасибо! Очень даже кстати было наткнуться на этот блог. Спасибо!


  17. djon :

    спасибо за тему


  18. Astra :

    Хорошо разжёвана тема!
    Будем применять на практике!


  19. Максим :

    Огромное спасибо Вам друзья, очень выручили!
    Как же задолбала эта дешевка от Мелкосовтверов!


  20. kleister :

    Что то ни чего понять не могу….


  21. Crazy Monkey :

    Поставил себе на сайт менюшку, выполненую на этой “технологии”!


  22. Дмитрий :

    А для седьмого ишака есть решение?


  23. Jungle :

    Спасибо за науку и съекономленные нервы!
    присоединяюсь: под IE7 есть что приемлимое?


  24. ukrjobman :

    решил помочь и разослал пост в соц. закладки. надеюсь поднимется популярность.


  25. moopCoumpCex :

    Здравствуйте, верстка блога почему то разъезжается в файрфоксе, при этом в опере и в осле вроде все норм. Мб можно подправить? Думаю немало народу на ФФ сидит


  26. Danila Alehin :

    Вопрос к автору топика:
    Ок, если у нас есть всплывающее окно в одном из вложенных блоков, которые выступает за рамки .container, то overflow:hidden; «съест» выступающую часть нашего попапа.
    Как вы решаете эту проблему?


  27. Каширин С. :

    Когда для div.container не нужны отступы (padding) слева/справа,то в этом случае я использую вариант, как в статье.


  28. Мерлин :

    Я обычно юзал способ как у человека в третьем коменте – не было проблем с растягиванием.


  29. insard :

    Пост навел на размышления *ушел много думать* …


  30. payottToda :

    Хороший пост, прочитав пару книг на тему всё таки не взглянул со стороны, а пост как-то задел.


  31. pomskism :

    Спасибо! а еще посты на эту тему будут?


  32. Cicabina :

    Спасибо! а еще посты на эту тему будут?


  33. NuckHimi :

    Добавил в закладки. Теперь буду почаще читать!


  34. Антон :

    Спасибо за тему! Попробуем применить :)


  35. sairus :

    Вставил в свой сайт, реально работает. Спасибо.


  36. celdimmedo :

    Я конечно, мало, что смыслю в посте, но постараюсь осилить.



22 queries 0.196 seconds.