为什么clearfix hack只适用于浮动元素?

时间:2016-05-13 09:38:10

标签: html css clearfix

浮动和绝对定位的元素都从文档流中取出。那么为什么clearfix hack只适用于浮动元素而不是绝对定位的元素呢?

2 个答案:

答案 0 :(得分:1)

有一种常见的误解,即从文档流中删除永久浮动。

情况并非如此,浮动元素从流中的标准位置移除,并在当前行上尽可能向左或向右移动,具体取决于指定的浮动方向。

W3 Spec

  

浮动是一个在当前行向左或向右移动的框。浮动(或者#34;浮动"或者#34;浮动"框)最有趣的特征是内容可能沿着它的一侧流动(或者被禁止这样做的' clear& #39;财产)。内容沿左浮动框的右侧向下流动,沿右浮动框的左侧向下流动。

     

浮动框向左或向右移动,直到其外边缘接触包含块边缘或另一个浮动边缘的外边缘。如果有行框,则浮动框的外部顶部与当前行框的顶部对齐。

浮动元素影响它们周围的元素,绝对定位的元素不会。

关于绝对定位的

W3 Spec

  

在绝对定位模型中,框相对于其包含块明确偏移。 它完全从正常流程中删除 (它对后来的兄弟姐妹没有影响)。

注意区别?

因此,clearfix(或间隙)仅影响浮动元素。 clearfix不用于 clear 浮动元素,它用于包含浮动元素在另一个元素中。

有一篇关于CSS-Tricks的精彩文章解释了All About Floats,并介绍了它们与定位之间的差异。

答案 1 :(得分:0)

FLOAT: 浮动元素时,元素不会被取出。 Float不会从文档的流中删除元素。

位置绝对: 当您定位元素时,元素将被取出(放置在其他元素之上)。 绝对定位会从文档的流中删除元素。给定绝对定位的元素将不再影响文档中其他元素的布局。

这是您可以轻松理解的最佳示例:Check this