CSS浮动bug？

Question

我在这里举了一个问题的例子： http://peterbriers.be/test/float_html5.html

如您所见，我有一个'导航列表'和一个浮动标题。 为什么导航列表中的标题？这是不正常的行为吗？ 导航列表甚至会继承标题的高度。 ：■

Answer 1

这与HTML5有无。您想要clear:both上的nav吗？你浮动header，浮动的元素被取出流动，所以nav就像它不存在一样。

如果清除不能达到您想要的效果，请提供有关您所需布局的信息。

编辑澄清和混淆：

导航从与标题相同的垂直区域开始，因为标题是浮动的。它的行为就像它不存在，但是ul上的clearfix在标题之后添加了不可见的元素，因为source-order明智地在它之后。然后，clearfix使元素看起来包含它。删除clearfix，所有空间都不在那里。

另外，你仍然没有告诉我们你想要它的样子（我不知道的原因）。

Answer 2

这实际上是非常正常的行为。如果您查看有关CSS Float（http://w3schools.com/css/css_float.asp）的W3信息，您会注意到以下信息：

  

Elements Float如何

     

元素水平浮动，   这意味着元素只能是   向左或向右浮动，而不是向上或向下浮动。

     

浮动元素将向远处移动   尽可能左或右。平时   这意味着一直到左边或   包含元素的权利。

     

浮动后的元素   元素将围绕它流动。

     

浮动之前的元素   元素不会受到影响。

如果您使用代码并在标题中的“个人”字样后面开始按钮混合，并将单词“个人”设置为填充整个屏幕宽度，您会注意到导航栏实际上位于那个标题。它实际上只是在做Float的目的。如果您希望导航栏位于标题下方，可以使用border =“0”和width =“100％”的小表格单元格，以便占用整个屏幕宽度，从而导致浮动下降到它之下。