CSS overflow：隐藏与浮动

本文介绍了CSS overflow：隐藏与浮动的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！问题描述 29岁程序员，3月因学历无情被辞！我在w3schools上阅读了下面的代码，不明白overflow属性会如何影响文本是否出现在ul的右边。 <！DOCTYPE html> < html> < head> < style> ul { list-style-type：none; margin：0; padding：0; overflow：hidden; } li { float：left; } a { display：block; width：60px; background-color：#dddddd; } < / style> < / head> < body> < ul> < li>< a href =＃home>首页< / a>< / li& < li>< a href =＃news>新闻< / a>< / li> < li>< a href =＃contact>联系人< / a>< / li> < li>< a href =＃about>关于< / a>< / li& < / ul> 注：如果未指定！DOCTYPE，则浮动项目可能会产生意外的结果。 背景颜色被添加到链接以显示链接区域。整个链接区域是可点击的，而不仅仅是文字。 注： overflow：hidden被添加到ul元素，以防止li元素移出列表。 < / body> < / html> 我知道 overflow：hidden 等。解决方案我用来处理在盒子外面的内容，但不知道它是如何应用的。尝试结束混淆： ul 是块级别的元素， p 元素（它们伸展到父宽度的100％）。这就是为什么如果在这些元素上没有声明宽度或显示， p 会出现在 ul / p> 现在在你的示例中， ul 只包含浮动元素。这使它崩溃到一个高度 0px （它仍然有100％的宽度，虽然你可以看到在示例中）。相邻的 p 将出现在浮动的 li 的右侧，因为它们被视为常规浮动元素。 p> 现在声明 overflow （除 visible 之外的任何值）新的块格式化上下文，它使 ul 包含其子项。突然， ul 重新出现，不再具有大小 0px 。 p 正被推到底部。您还可以声明 position：absolute 以实现相同的清除效果（带有现在 ul 是从正常元素流中取出的 - p s将被 ul 重叠。）查看示例小提示如果你是技术人员，请比较CSS规范的相应段落： §10.6.3当溢出计算为可见时，正常流中的块级非替换元素和 §10.6.7块的自动高度格式化上下文根。（感谢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;} 没有溢出：< ul> < li>< a href =＃home>首页< / a>< / li>< li>< a href =＃news>新闻< / a>< / li> < li>< a href =＃about>关于< / a>< / li> < / ul>请注意，折叠的ul - 没有背景颜色可见的折叠边框，此段落将lis视为常规浮动< / p& >< li>< a href =＃home>首页< / a>< / li>< li>< a href =＃news>新闻< / a& / li>< li>< a href =＃about>关于< / a>< / li>< / ul> ul已重新出现 - 现在包含子项li - 已清除浮动 I read the following code on w3schools and do not understand how the overflow property would impact whether text appears to the right of the "ul" or not. <!DOCTYPE html><html><head> <style> ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; } li { float: left; } a { display: block; width: 60px; background-color: #dddddd; } </style></head><body><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> Note: If a !DOCTYPE is not specified, floating items can produce unexpected results. A background color is added to the links to show the link area. The whole link area is clickable, not just the text. Note: overflow:hidden is added to the ul element to prevent li elements from going outside of the list.</body></html>I know that the overflow:hidden etc. is used to handle content that goes outside of the box but don't understand how it applies in this instance. 解决方案 I try to end the confusion:ul is a block-level element as is the p element (they stretch to 100% of the parent width). That is why per default the p will appear below the ul if no width or display is declared on those elements.Now in your example the ul contains only floated elements. This makes it collapse to a height of 0px (It still has 100% width though as you can see in the example). The adjacent p will appear to the right of the floated lis because they are considered as normal floated elements.Now declaring overflow (any value other than visible) establishes a new block formatting context, which makes the ul contains its children. Suddenly the ul "reappears", not having size 0px anymore. The p is getting pushed to the bottom. You could also declare position:absolute to achieve the same "clearing" effect (with the side effect that now the ul is taken out of the normal element flow - the ps will be overlapped by the ul.)See the example fiddleIf you are into the technical stuff, compare the according paragraphs of the CSS spec:§10.6.3 Block-level non-replaced elements in normal flow when 'overflow' computes to 'visible'and§10.6.7 'Auto' heights for block formatting context roots. (Thanks to BoltClock for digging out the links).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>Notice the collapsed ul - no background-color visible, collapsed border and this paragraph treats the lis as regular floats 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>the ul reappeared - it now contains the child li's - the float is cleared 这篇关于CSS overflow：隐藏与浮动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！上岸，阿里云！