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

30.08.2024

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

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

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

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

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

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

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

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

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

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

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

HTML




 

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

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

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

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

 

 

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

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

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

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;
    }


    2008-09-30 at 7:59 pm
  2. stikhomirov :

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


    2008-09-30 at 10:06 pm
  3. Vii :

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


    2008-09-30 at 11:22 pm
  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%;}


    2008-10-01 at 11:27 am
  5. Ёжик :

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


    2008-10-01 at 1:35 pm
  6. denlex :

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


    2008-10-01 at 5:36 pm
  7. Dimox :

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


    2008-10-01 at 7:06 pm
  8. Vii :

    vladfrandom:

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

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


    2008-10-01 at 11:03 pm
  9. Ambientos :

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


    2008-10-03 at 12:50 am
  10. Curly Brace :

    А чем плох clearfix?


    2008-10-05 at 3:26 pm
  11. Curly Brace :

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


    2008-10-05 at 3:28 pm
  12. Влад :

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


    2008-10-05 at 7:46 pm
  13. Serg :

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


    2008-10-12 at 5:25 pm
  14. Octane :

    Обычно хватает следующего кода:
    #conteiner:after {
    display: block;
    clear: both;
    content: ""
    }
    и для IE в отдельном файле:
    #conteiner {
    zoom: 1;
    }
    Только нужно быть внимательным с вертикальными отступами в Opera, при таком способе они магическим образом пропадают в некоторых местах :-)


    2008-10-12 at 8:21 pm
  15. duwegub :

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


    2008-10-13 at 6:59 pm
  16. Karim :

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


    2008-10-24 at 2:32 pm
  17. djon :

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


    2008-10-29 at 12:56 am
  18. Astra :

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


    2008-10-29 at 8:52 pm
  19. Максим :

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


    2008-11-12 at 11:45 pm
  20. kleister :

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


    2008-11-17 at 8:23 pm
  21. Crazy Monkey :

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


    2008-11-22 at 8:33 pm
  22. Дмитрий :

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


    2008-11-23 at 7:14 pm
  23. Jungle :

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


    2008-11-29 at 3:49 pm
  24. ukrjobman :

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


    2008-12-01 at 8:26 pm
  25. moopCoumpCex :

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


    2008-12-02 at 2:03 pm
  26. Danila Alehin :

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


    2008-12-03 at 2:28 pm
  27. Каширин С. :

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


    2008-12-04 at 4:01 pm
  28. Мерлин :

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


    2008-12-05 at 6:45 pm
  29. insard :

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


    2008-12-07 at 2:36 am
  30. payottToda :

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


    2008-12-07 at 4:06 pm
  31. pomskism :

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


    2008-12-07 at 5:16 pm
  32. Cicabina :

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


    2008-12-08 at 5:23 pm
  33. NuckHimi :

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


    2008-12-09 at 12:24 pm
  34. Антон :

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


    2008-12-09 at 11:42 pm
  35. sairus :

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


    2008-12-10 at 7:06 pm
  36. celdimmedo :

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


    2008-12-10 at 8:14 pm