什么时候应该漂浮的HTML元素完全清除？

任何人都可以解释什么时候浮动元素得到清除？什么时候应该漂浮的HTML元素完全清除？

我注意到有时当我在HTML中创建某些东西时，我不清楚它们，它仍然看起来不错！

也可以overflow:hidden作为清算的替代品吗？

请看下面的例子：

<html> 
<head> 
    <style> 
    .a { background-color: red; overflow: hidden } 
    .floated-left { float: left; width: 100px; height: 100px; background-color: blue; } 
    </style> 
</head> 

<body> 
    <p>div with class a, that does have overflow:hidden:</p> 
    <div class="a"> 
    <div class="floated-left">Hi,</div> 
    <div class="floated-left">Mom!</div> 
    </div> 

    <p>i didn't clear anything</p> 
</body> 
</html>

在这里，我没有清除浮动的div，但设置overflow:hidden为.a类及以下出现在正常的元素流。

但是，如果我从.a类中删除overflow:hidden，则会被取代。

请解释一下！

谢谢，Boda Cydo。

来源

2010-01-29 bodacydo

对于块级，非替换元素，当overflow未设置为“可见”和height不是“自动”时，element's height取决于其后代（CSS 2.1 § 10.6.6）。因此，当您在.a上设置overflow: hidden时，它会延伸以包含浮动的后代。 低于.a，所以它低于浮动。

没有overflow: hidden，.a不包含浮动儿童;其计算的高度为0. 仍然低于.a，但不是浮标。漂浮物推动的内联内容，因为漂浮物不会这样做。

尝试把周围的边框和.a段落，更清楚地看到差异。

来源

2010-01-30 00:10:33 outis

overflow: hidden应当用作替换用于清除的div每当它可以是，这是大部分时间。

来源

2010-01-30 00:01:54 cletus

参考：http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/ – outis 2010-01-30 00:03:11

报告中，我们还可以拉伸花车和结算的父母进行区分。 – outis 2010-01-30 00:04:15

另请参阅http：// blue-anvil。com/archives/experiments-with-floats-what-the-best-method-of-clearance/ – cletus 2010-01-30 00:16:14

如果需要浮动围绕轮胎块为单位的元件和含元素需要垂直扩展的高度取的最高。否则，非浮动相邻元素的文本/内联元素将在浮动点周围流动。如果这个内容比你的浮点数高，那么你就没事了......容器将会扩展。如果漂浮的元素较高，那么如果你想让容器和浮子一样高，你就需要清除它。

来源

2010-01-30 00:03:44 prodigitalson

正如我在你的另一篇帖子When should overflow:hidden be used for a <div>?中回复的那样，这是因为一个div的子元素抛出边界溢出，当溢出是除了可见以外的任何东西。当溢出可见时，技术上停止在“妈妈！”的div边界处。当它不是可见的时候（溢出，滚动，自动），边界会一直持续到它自己的父边界（在这种情况下是浏览器的右边缘）。新的块元素可能不会开始，直到它有空间进入。当溢出可见时有效，它可以直接在最后一个浮动div的边界边界之后开始。当它是其他的时候，它必须等待div的全面休息。

来源

2010-01-30 00:11:09

感谢您的帮助！我现在明白这个东西！ – bodacydo 2010-01-30 00:23:18

什么时候应该漂浮的HTML元素完全清除？

回答

相关问题