我尽力消除混乱：
ul是一个块级元素，与
p元素一样（它们延伸到父宽度的100％）。这就是为什么默认情况
p下，
ul如果在这些元素上未声明宽度或显示，它将显示在if
下方的原因。
现在在您的示例中，
ul仅包含浮动元素。这使其折叠到一个高度
0px（尽管如示例中所示，它仍然具有100％的宽度）。相邻元素
p将出现在float
lis 的右侧，因为它们被视为普通float元素。
现在，声明
overflow（除以外的任何值
visible）将建立一个新的块格式化上下文，从而使
ul包含其子级。突然，
ul“重新出现”，不再有大小
0px。该
p是越来越被推到了底部。您还可以声明
position:absolute实现相同的“清除”效果（副作用是现在
ul从正常元素流中删除了，而
ps将与重叠
ul。）
如果您对技术感兴趣，请比较CSS规范的相应段落：
当’overflow’计算为’visible’
和 §10.6.7’Auto’高度以对块格式上下文根进行格式化时，正常流程中的§10.6.3块级不可替换元素。（感谢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>
