CSS float ошибка?

Question

Я сделал небольшой пример своей проблемы здесь: http://peterbriers.be/test/float_html5.html

Как видите, у меня есть «список навигации» и плавающий заголовок.ПОЧЕМУ заголовок В списке навигации?Это не нормальное поведение, не так ли?Список навигации даже наследует высоту заголовка.: S

Answer 1

Это на самом деле очень нормальное поведение. Если вы проверите информацию W3 на CSS Float (http://w3schools.com/css/css_float.asp),, вы заметите эту информацию:

Как плавают элементы

Элементы плавают горизонтально, это означает, что элемент может быть только плавает влево или вправо, а не вверх или вниз.

Плавающий элемент будет перемещаться как можно дальше влево или вправо, как это возможно. Обычно это означает, что весь путь влево или право на содержащий элемент.

Элементы после плавающего элемент будет обтекать его.

Элементы перед плавающим элемент не будет затронут.

Если вы возьмете свой код и просто начнете нажимать кнопку после слова «Личное» в заголовке и сделаете слово Личное настолько длинным, чтобы оно занимало всю ширину экрана, вы заметите, что панель навигации фактически опускается ниже заголовок в этой точке. Это на самом деле просто делает то, что должен был сделать Float. Если вы хотите, чтобы панель навигации находилась ниже заголовка, возможно, используйте небольшую ячейку таблицы с border = "0" и width = "100%", чтобы вы заняли всю ширину экрана, в результате чего значение float падает ниже нее.

Answer 2

Это не имеет ничего общего с HTML5. Вы хотели clear:both на nav? Вы плавали header, всплывающие элементы выводятся из потока, поэтому nav действует так, как будто его там нет.

Если очистка не дает желаемого результата, пожалуйста, включите информацию о том, каким должен быть желаемый макет.

РЕДАКТИРОВАТЬ для уточнения и путаницы :

Навигация начинается в той же вертикальной области, что и заголовок, поскольку курс перемещается. Он действует так, как будто его там нет, но clearfix в ul добавляет невидимый элемент после заголовка, потому что порядок следования исходных кодов следует после него. Clearfix тогда заставляет элемент казаться содержать это. Удалите исправление, и все это пространство не будет там.

Кроме того, вы до сих пор не сказали нам, как вы хотите, чтобы это выглядело (по причинам, о которых я не знаю).