Плавающие элементы в CSS

Question

На этом сайте http://inspectelement.com/html5portfolio/ Я увидел, что он использует команду float:left; для элемента html5 <header> и класс css "section", который является областью, где находится содержимое.

Если я изменю его на float:right, или float:none, или я полностью его удалу, ничего не изменится.

Почему он использует команду float?

Заголовок имеет фиксированное положение, а секция центрируется через контейнер:

#headercontainer, #contentcontainer { 
    width: 960px; margin: 0 auto; position: relative; 
}

Это какая-то техника, с которой я не знаком? Или я могу просто удалить команду float?

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

Answer 1

Я думаю, он на самом деле использует float:left, чтобы придать своим <section> элементам правильную высоту.без float:left элементы <section> берут свою высоту от <h2>.

Используйте firebug, чтобы удалить float:left, и вы заметите, что высота <section> s уменьшится.

Answer 2

Он, вероятно, использует float, поэтому элемент выходит из нормального потока, и он не очищает их, чтобы сохранить нижнее поле + высоту секции в состоянии 1000px независимо от того, сколько контента находится в плавающей секции.Однако, если содержание <section> превысит 1000 пикселей, его подход нарушится.Но так как это сайт-портфолио, он сможет поддерживать его работу.

Answer 3

Объявление float: left в классе .section фактически переопределяется родительским элементом #contentcontainer, который имеет float: none, так что вы совершенно правы - он вообще ничего не делает!