一级清算和二级清算区别_清算浮动

一级清算和二级清算区别

与CSS浮动模型经常混淆的一个问题是，如果您希望浮动对象中的包含元素完全包含它，则需要在浮动对象下方添加一个“清除”元素。 埃里克·迈耶（Eric Meyer）的《 浮游物》 （ Containing Floats）为这个问题提供了极好的解释。

不幸的是，处理此问题的标准方法涉及在文档上添加难看的附加标记，以充当“更清晰”的标记。 通常可以利用文档中的另一个元素，但是通常没有这样的元素可用，必须添加一个额外的清除元素。

托尼·阿斯莱特（Tony Aslett） 发表了一篇文章 （也在此讨论 ），解释了解决此问题的方法。 首先观察到CSS：after伪元素可以在具有良好CSS 2支持的浏览器中使用，以使用CSS本身添加有效的清除元素：


.floatcontainer:after{
content: ".";
display: block;
height: 0;
overflow: hidden;
clear: both;
visibility:hidden;
}

这足以解决大多数符合现代标准的浏览器中的问题，而Mac和Windows的Internet Explorer都非常明显（并非完全出乎意料）被遗漏了。 Tony提出了针对这些浏览器的修复程序，这些修复程序利用了许多CSS漏洞，其中包括一个依赖于IE / Windows的float模型中已记录的错误的漏洞。

对于涉及多个浏览器黑客的技术，我倾向于持谨慎态度，因为未记录的bug总是以不可预测的方式交互。 值得阅读该技术的细节，因为您一定会学到一些关于CSS float模型和/或IE对它的不当对待，但我建议在实际实现它时要谨慎。 仍然是工具箱的另一个工具。

翻译自: https://www.sitepoint.com/clearing-floats/

一级清算和二级清算区别