CSS溢出：隐藏与浮游物
我读了w3schools上的以下代码，不明白overflow属性将如何影响文本是否出现在ul的右边。
ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; } li { float: left; } a { display: block; width: 60px; background-color: #dddddd; padding: 8px; }
<ul> <li><a href="#home">Home</a></li> <li><a href="#news">News</a></li> <li><a href="#contact">Contact</a></li> <li><a href="#about">About</a></li> </ul> <p><b>Note:</b> overflow:hidden is added to the ul element to prevent li elements from going outside of the list.</p>
我知道overflow:hidden用于处理超出框的内容，但不知道它在这种情况下如何应用。
我试图结束这个混乱：
ul和p元素一样是一个块级元素（它们伸展到父宽度的100％）。 这就是为什么默认情况下，如果在这些元素上没有声明宽度或显示， p将出现在ul下面。
现在在你的例子中ul只包含浮动元素。 这使得它崩溃到0px的高度（它仍然有100％的宽度，尽pipe你可以在例子中看到）。 相邻的p将出现在浮动的右边，因为它们被认为是正常浮动的元素。
现在声明overflow （除visible之外的任何值）build立一个新的块格式上下文 ，这使得ul包含它的子ul 。 突然之间ul “重新出现”，没有大小0px了。 p正在被推到最后。 你也可以声明position:absolute以达到相同的“清除”效果（副作用是ul从正常的元素stream中取出 – p将与ul重叠）。
看例子小提琴
如果你在技术方面的东西，比较CSS规范的段落：
§10.6.3正常stream程中的块级非replace元素，当“溢出”计算为“可见”
和
块格式化上下文根的“自动”高度 。 （感谢BoltClock挖掘链接）。
ul{ list-style-type:none; margin:0; padding:0; background-color:#dddddd; border:2px solid red; } li{ float:left; } a{ display:block; width:60px; background-color:#555; color:white; } p{ margin:0; outline:2px dotted blue; } #two{ clear:both; overflow:hidden; }
No overflow: <ul> <li><a href="#home">Home</a></li> <li><a href="#news">News</a></li> <li><a href="#contact">Contact</a></li> <li><a href="#about">About</a></li> </ul> <p>Notice the collapsed ul - no background-color visible, collapsed border and this paragraph treats the lis as regular floats </p> <br> With overflow: hidden <ul id="two"> <li><a href="#home">Home</a></li> <li><a href="#news">News</a></li> <li><a href="#contact">Contact</a></li> <li><a href="#about">About</a></li> </ul> <p>the ul reappeared - it now contains the child li's - the float is cleared</p>
设置overflow: hidden在一个元素上会导致创build一个新的浮点上下文，所以浮点在具有overflow: hidden应用的元素中的元素将被清除。
而不是overflow:hidden; 使用clear:both; 为<p> 。 这里是使用http://jsfiddle.net/Mvv8w/ 。 基本上overflow:hidden将清除任何东西，就像clear:both; 确实。
这就是为什么w3schools不是网页devise师/开发者的可靠来源。 你是对的，这是一个可怕的例子。
这并不是因为在这个例子中父元素没有固定的。 此外，这是一个无序的列表标记，无论如何，它将延伸到它的孩子的大小。
CSS
.parent { width: 150px; height: 100px; padding: 10px; background: yellow; overflow: hidden; } .child { float: left; width: 75px; height: 120px; margin: 10px; background: blue; } .baby { width: 200px; height: 25px; background: green; }
标记
<div class="parent"> <div class="child"> <div class="baby"> </div> </div> <div class="child"> </div> </div>
