Проблема с Div и флоатными элементами

[rango2014]

Верстаю собственно страничку, вот код http://jsfiddle.net/Yura/mWNap/

 

Возникла такая проблема, имеется header content и  footer

 

в контенте имеются элементы <ul><li></li></ul> при помощи которых сделано горизонтальное меню

естественно эти элементы флоатны.

Так вот когда я выставляю для <li> float:left

нижняя граница контента приподнимается над <ul>

Что бы опустить границу, после ul вставил <div> </div> и присвоил ему clear:both; тогда граница опускается

 

Пожалуйста объясните, почему происходит поднятие границы, ведь насколько я понимаю <ul> находится в <div id="content"> и не должен выходить за его границы.

 

Заранее спасибо.

 

вот еще нарисовал картинку, может будет понятней :-)

 

[veremey]

Здесь вот в чём дело, одно из особенностей  свойства float - оно ещё и влияет на  соседние теги, которые находятся после блока, которым float не задан по этому после такого блока принято писать блок с свойством clear

[rango2014]

Да, я это понимаю, а как быть если после флотных элементов больше ничего нет, или футеру присваивать?

[Zverushka]

Надо почитать статьи как отменить обтекание. Есть несколько способов. 

Два лучших - это ovehflow: hidden родителию или псевдоэлемент :after { clear: both; display: table; content: ""; } тоже родителю.

Я кстати пишу display: block - есть какие-то минусы по сравнению с table?

[rango2014]

Zverushka

 

Огромное спасибо!

overflow: hidden помогло

[npofopr]

  On 11/26/2013 at 9:02 PM, rango2014 said:

Zverushka

 

Огромное спасибо!

overflow: hidden помогло

 

Еще лучше поставить .clearfix перед футером.

overflow: hidden; не всегда полезен.

[Zverushka]

  On 11/27/2013 at 12:09 AM, npofopr said:

Еще лучше поставить .clearfix перед футером. overflow: hidden; не всегда полезен.

 

Тоже самое можно и сказать про клиар фикс - н-р, если есть два псевдоэлемента - клиарфикс уже просто не поместится. В общем каждый способ надо рассматривать отдельно, что удобнее в каждом конкретном случае - его и применять. 

 

Плюс интересно узнать мнение всех верстальщиков, как вы думаете - не нагружает ли клиарфикс систему? допустим мы 20 раз вставили его в код - у нас лишние 20 псевдослоев - не скажутся ли они на производительности системы?

Edited November 27, 2013 by Zverushka

[SelenIT]

  On 11/26/2013 at 8:26 PM, Zverushka said:

пишу display: block - есть какие-то минусы по сравнению с table?

http://jsfiddle.net/zTv5y/2/

 

 

 

  On 11/27/2013 at 1:03 AM, Zverushka said:

не нагружает ли клиарфикс систему?

Сами по себе невидимые слои нулевого размера особо грузить рендерер не должны. Но любые зависимости положения элементов друг от друга (а при float их полно) заставляют браузер пересчитывать, а то и перерисовывать все эти элементы при каждом изменении (напр. анимациях размеров).

[Zverushka]

Вот оно в чем дело, а я то думала, почему у меня маргин не работает =).....

[npofopr]

  On 11/27/2013 at 5:31 AM, Zverushka said:

Вот оно в чем дело, а я то думала, почему у меня маргин не работает =).....

марджин то должен работать, просто из-за нулевого размера блока он не там, где бы вы хотели. Хотя может вы о другом.

[Zverushka]

Ну я о том, что марджин хоть и существует, но ничего не отодвигает от себя)...

[swandev]

  On 11/27/2013 at 2:04 AM, SelenIT said:

 

  On 11/26/2013 at 8:26 PM, Zverushka said:

пишу display: block - есть какие-то минусы по сравнению с table?

http://jsfiddle.net/zTv5y/2/

 

  On 11/27/2013 at 1:03 AM, Zverushka said:

 

 

.block-clearfix {    border: 1px solid red;}.table-clearfix {     border: 1px solid red;} 

Если добавить это, то получается так

http://jsfiddle.net/Alexey_swn/zTv5y/6/

 

Почему?

Edited November 27, 2013 by ALEEX SWN

[Zverushka]

Потому что у p - верхние и нижнии поля - а после него уже генерится еще один блок - вот и добавляется новое пространство.

[SelenIT]

Потому что через border и padding margin-ы тоже не схлопываются. Поэтому если у контейнера есть что-то из-них, то margin-ы его детей поневоле останутся внутри. А вот без них — могут вывалиться (как в моем первом примере).

 

С недавних пор для предотвращения выпадения margin-ов я повадился использовать border: transparent solid .1px. Визуально 1/10 пикселя во всех браузерах при любом разумном масштабе округляется до нуля и не отображается, но с точки зрения алгоритма ненулевой border присутствует и с задачей «запереть margin-ы потомков внутри» вполне справляется.

Edited November 28, 2013 by SelenIT

[swandev]

  On 11/27/2013 at 7:41 AM, SelenIT said:

Потому что через border и padding margin-ы тоже не схлопываются. Поэтому если у контейнера есть что-то из-них, то margin-ы его детей поневоле останутся внутри. А вот без них — могут вывалиться (как в моем первом примере).

 

С недавних пор для предотвращения выпадения margin-ов я повадился использовать border: transparent solid .1px. Визуально 1/10 пикселя во всех браузерах при любом разумном масштабе округляется до нуля и не отображается, но с точки зрения алгоритма ненулевой border присутствует и с задачей «запереть margin-ы потомков внутри» вполне справляется.

Спасибо за разъяснения)

[Zverushka]

  On 11/27/2013 at 7:41 AM, SelenIT said:

border: transparent solid .1px

С дробными числами пикселей были проблемы в одной из опер - не напомните в какой версии?

[SelenIT]

Честно говоря, не вспомню. Помню вековой баг с дробными процентами, но то седая история. Сейчас вот нагуглил, что в 10-м г. дробные пиксели рисовались в тогдашнем Фоксе (может, на Маке?), надо будет перетестировать…

[SelenIT]

Мда, позор моей невнимательности (и спасибо Зверушке-ушки-на-макушке). Firefox всё-таки рисует дробные пиксели как один пиксель. Видимо, в том моем случае это компенсировалось чем-то другим фоксоспецифичным. Эх, жалко, я-то думал, что универсальный метод открыл...

[Zverushka]

Зато, допустим такая конструкция работает 

http://jsfiddle.net/XspQM/2/

em или px - неважно, вопрос только - мож граница вообще исчезла?

[SelenIT]

Увы... А с переходом странной границы в 1/120 пикселя начинает отображаться как однопиксельная (в Fx).

 

Зато, кажется, работает padding размером чуть больше той же 1/120px. Может, это — универсальное решение?