узнать, как работают контейнеры в CSS

Question

Я программист, пытающийся внести некоторые коррективы в веб-дизайн и вообще нахожу CSS очень логичным.Пока что только «боксерская модель» остается для меня волшебной страной, полной минотавров и гарпий.Я проиллюстрирую это примерами:

• http://jsfiddle.net/qyMxv/
  Внутренний элемент div с указанным заполнением выходит за пределы пространства div.Разве div не должен заключать все внутри него?Какой смысл делать иначе?

• http://jsfiddle.net/wk9Kg/
  Родительский div полностью исчезает, в то время как дочерние элементы отображаются нормально.Еще более странно, что это поведение вызвано float:left;.

Есть ли учебник / справочник, который мог бы помочь мне увидеть логику в этих причудах?Некоторое время я доверял w3schools, но они очень кратки по этому вопросу.Найти хороший контент в Интернете также оказалось непросто.Прямо сейчас я просто возлюсь со свойствами display, position и float, пока он не заработает.

Спасибо!

Answer 1

1. Как правило, div должен заключать / содержать любой относительно или статически расположенный, не плавающий элемент внутри, но вы можете избежать неприятностей с заполнением встроенного элемента, как у вас есть, или с отрицательными полями /отрицательные значения с положением относительно.Это допускает более гибкие схемы размещения.чем видно.В IE7 / IE6 вам просто нужно вызвать hasLayout, что можно сделать с помощью многочисленных комбинаций свойства / значение (это противоречит спецификации).См. http://work.arounds.org/clearing-floats/, чтобы узнать, как очистить поплавки внутри.

Вот список сайтов для кросс-браузерных ошибок, которые я скомпилировал из другого вопроса:

• http://www.brunildo.org/test/

• http://www.gtalbot.org/BrowserBugsSection/

• http://www.quirksmode.org/

• http://www.quirksmode.org/bugreports/

• http://www.positioniseverything.net/

• http://reference.sitepoint.com/css

• http://www.richinstyle.com/bugs/

• http://haslayout.net/

• http://css -discuss.incutio.com / wiki / Main_Page

• http://channel9.msdn.com/wiki/wiki/InternetExplorerSupportForCSS/

• http://samples.msdn.microsoft.com/ietestcenter/

• http://channel9.msdn.com/wiki/wiki/InternetExplorerBugs/

• http://css -class.com / test / bugs / ie / ie-bugs.htm

• http://perfectionkills.com/category/cft/

• http://api.jquery.com/jQuery.support/

• http://www.css -lab.com /

• http://www.iecss.com/ (обзор Джонатана Нила о стилях IE по умолчанию)

• http://work.arounds.org/ (Это фактический суперархив сайта, над которым я работаю)

Answer 2

Плавающие элементы извлекаются из нормального потока и поэтому не считаются занимающими какую-либо высоту.
Чтобы исправить это, вы можете добавить пустой элемент после поплавка с помощью clear:both.Элемент очистки является регулярным элементом, который находится в потоке, и свойство clear ставит его ниже плавающего элемента.
Следовательно, вмещающий блок расширится, чтобы содержать элемент очистки, и по совпадению также будет содержать значение с плавающей точкой.

Для получения дополнительной информации см. spec :

Поскольку поплавок отсутствует в потоке, непозиционированные блоки блоков создаются до и после блока поплавкатечь вертикально, как если бы поплавок не существовал.

Answer 3

• Эрик Мейер CSS: полное руководство является хорошим справочным материалом.Он старый, но блочная модель не изменилась.
• quirksmode содержит хорошие объяснения поведения, специфичного для браузера.
• например, №2, вы можете добавить <div style="clear: both;"></div> после второго черного блока или и высоты и ширины контейнера <div>

Answer 4

Я считаю, что статьи Криса Койера хорошо написаны и легки для понимания. У него есть раздел, посвященный основным понятиям, включая такие темы, как Floats и Box Model

Надеюсь, это поможет, JD

Answer 5

Что касается вашего первого вопроса, вот мой любимый метод очистки поплавков в контейнере без пустых элементов: http://www.quirksmode.org/css/clearing.html