浮动导航列表
我在这里举了一个关于我的问题的小例子： http://peterbriers.be/test/float_html5.html
正如你所看到的，我有一个“导航列表”和浮动标题。 为什么标题位于导航列表中？这不是正常行为，不是吗？ 导航列表甚至继承了标题的高度。 ：s
I made a little example of my problem here:
http://peterbriers.be/test/float_html5.html
As you can see, I have a 'navigation list', and a floating header.
WHY is the header IN the navigation list? That is'nt normal behaviour is it?
The navigation list even inherits the height of the header. :s
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
这与 HTML5 无关。您想在
nav上clear:both吗？您浮动了header，浮动元素被从流程中取出，因此nav表现得就像它不存在一样。如果清理不能达到您想要的效果，请提供有关您想要的布局的信息。
编辑以澄清和混淆：
导航从与标题相同的垂直区域开始，因为标题是浮动的。它的行为就像它不存在一样，但是 ul 上的clearfix 在标题后面添加了不可见元素，因为按源顺序，它在标题后面。然后，clearfix 会使该元素看起来包含它。删除clearfix，所有空间将不复存在。
另外，你还没有告诉我们你想要它的外观（出于我不知道的原因）。
This has nothing to do with HTML5. Did you want to
clear:bothon thenav? You floated theheader, floated elements are taken out of flow so thenavacts like it isn't there.If clearing doesn't do what you want, please include information as to what your desired layout needs to be.
EDIT for clarification and confusion:
The nav starts at the same vertical area as the heading because the heading is floated. It acts like it isn't there, but the clearfix on the ul adds the invisible element after the heading because source-order wise its after it. The clearfix then makes the element appear to contain it. Remove the clearfix and all that space will not be there.
Also, you still have not told us how you want it to look ( for reasons I do not know of ).
这实际上是非常正常的行为。如果您检查 CSS Float 上的 W3 信息 (http://w3schools.com/css/css_float.asp)，您会注意到以下信息：
如果您使用代码并在标题中的“个人”一词后面开始按钮混搭，并将“个人”一词设置得足够长以使其填满整个屏幕宽度，您会注意到导航栏实际上会下降到标题下方观点。它实际上只是做了 Float 想要做的事情。如果您希望导航栏位于标题下方，可以使用 border="0" 和 width="100%" 的小表格单元格，这样您就可以占据整个屏幕宽度，从而导致浮动落到其下方。
This is actually very normal behaviour. If you check the W3 information on CSS Float (http://w3schools.com/css/css_float.asp), you will notice this information:
If you take your code and just start button mashing after the word "Personal" in your header, and make the word Personal so long that it fills your entire screen width, you'll notice that the navigation bar actually drops below the header at that point. It's actually just doing what Float was intended to do. If you want your navigation bar below your header, maybe use a small table cell with border="0" and width="100%" so that you take up the entire screen width, causing float to drop below it.