Html 浮动css后Div崩溃
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/370432/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Div collapse after float css
提问by user36682
I have a div called NAV and inside of NAV I have an UL with 5 li which I float to the left, the li's that is but when I do that the NAV collapses. I know this because I put a border around NAV to see if it collapses and it does. Here is the example.
我有一个名为 NAV 的 div，在 NAV 内部，我有一个 UL 5 li，我向左浮动，li 就是这样，但是当我这样做时，NAV 会崩溃。我知道这一点是因为我在 NAV 周围放置了一个边框，以查看它是否会折叠并且确实如此。这是示例。
collapsed http://img401.imageshack.us/img401/8867/collapsedze4.png
折叠 http://img401.imageshack.us/img401/8867/collapsedze4.png
no collapsed http://img71.imageshack.us/img71/879/nocollapsedkx7.png
没有折叠 http://img71.imageshack.us/img71/879/nocollapsedkx7.png
as you can see in the first image, the links in the NAV div are floated left and that black border ontop is the actual div called NAV.
正如您在第一张图片中看到的，NAV div 中的链接向左浮动，顶部的黑色边框是称为 NAV 的实际 div。
in this image you can see how it has top and bottom border and it not collapsed.
在这张图片中，您可以看到它的顶部和底部边框是如何折叠的。
here is some of the html and css I used.
这是我使用的一些 html 和 css。
alt text http://img301.imageshack.us/img301/5514/codejc8.png
替代文字 http://img301.imageshack.us/img301/5514/codejc8.png
#nav #ulListNavi a {
float: left;
}
回答by Ken
Add any overflowvalue other than visibleto your container:
添加overflow除visible容器之外的任何值：
div#nav { overflow:auto; }
Then add widthto restore the width
然后添加width恢复宽度
div#nav { width: 100%; overflow:auto; }
回答by Abram Simon
One solution is to add a "clear:both" style to an element after the last floated anchor, for instance:
一种解决方案是在最后一个浮动锚点之后向元素添加“clear:both”样式，例如：
<div id="nav">
<ul id="ulListNavi">
<li><a href="#">Home</a></li>
<li><a href="#">Search</a></li>
<li><a href="#">Flowers</a></li>
<li><a href="#">My Account</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
<div style="clear:both;"></div>
</div>
This causes the containing element to clear all floating elements before closing the containing box.
这会导致包含元素在关闭包含框之前清除所有浮动元素。
回答by seanb
A few other options for clearing floats here:
在这里清除浮动的其他一些选项：
http://www.quirksmode.org/css/clearing.html
http://www.quirksmode.org/css/clearing.html
http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/
http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/
As to the best way of doing it, that's almost a holy war, the purists would freak about the extra div, if you are not fussed by a little extra markup, the addition of the cleared div as suggested by Joshua and AJ will work fine, and is a reliable technique, but there are at least 17 other ways of doing it...
至于这样做的最佳方式，那几乎是一场圣战，纯粹主义者会对额外的 div 感到害怕，如果您不为一点额外的标记而大惊小怪，那么按照 Joshua 和 AJ 的建议添加已清除的 div 会很好用，并且是一种可靠的技术，但至少还有 17 种其他方法可以做到这一点......
回答by seanb
add this code after your ul:
在您的 ul 之后添加此代码：
<div style="clear: both"></div>
回答by dylanfm
Try floating the containing element to the left too.
尝试将包含元素也向左浮动。
回答by Doug
Don't bother with clearing elements or overflow. Add this:
不要理会清除元素或溢出。添加这个：
#nav {
float: left;
}
When you float the LI's, the #nav no longer "contains" anything so it collapses. But if the #nav is floated also, it contains anything floated inside it, so it expands again.
当您浮动 LI 时，#nav 不再“包含”任何内容，因此它会崩溃。但是如果 #nav 也浮动，它包含任何浮动在里面，所以它再次扩展。
(Also consider removing the #nav div and just applying the same styles to the UL.)
（还可以考虑删除 #nav div 并将相同的样式应用于 UL。）
回答by Mark Nielsen
Your problem is because you are floating the <A>elements, but each of them is inside an <LI>element. LIs display as blocks by default, so each <LI>is forcing it's child <A>to begin on a new line.
您的问题是因为您正在浮动<A>元素，但每个元素都在一个<LI>元素内。LIs 默认显示为块，因此每个<LI>都强制它的子代<A>从新行开始。
If you float the <LI>s, I think you'll solve your problem.
如果你浮动<LI>s，我想你会解决你的问题。
#nav #ulListNavi li {
float: left;
}
回答by Rima Gerhard
The quickest solution would be to add overflow:hidden to clear the float on the parent element:
最快的解决方案是添加 overflow:hidden 以清除父元素上的浮动：
#nav{overflow:hidden;}
回答by Chris
Without changing your HTML:
无需更改您的 HTML：
#nav
{
width: 100%;
overflow: auto;
border: solid 1px red;
}
#ulListNavi
{
margin: 0;
padding: 0;
list-style: none;
}
#nav #ulListNavi li
{
float: left;
}
#nav #ulListNavi li a
{
margin-left: 5px;
}
Works in IE8 and FF 3.5
适用于 IE8 和 FF 3.5
