浮动和绝对定位的元素都从文档流中取出。那么为什么clearfix hack只适用于浮动元素而不是绝对定位的元素呢?
答案 0 :(得分:1)
有一种常见的误解,即从文档流中删除永久浮动。
情况并非如此,浮动元素从流中的标准位置移除,并在当前行上尽可能向左或向右移动,具体取决于指定的浮动方向。
浮动是一个在当前行向左或向右移动的框。浮动(或者#34;浮动"或者#34;浮动"框)最有趣的特征是内容可能沿着它的一侧流动(或者被禁止这样做的' clear& #39;财产)。内容沿左浮动框的右侧向下流动,沿右浮动框的左侧向下流动。
浮动框向左或向右移动,直到其外边缘接触包含块边缘或另一个浮动边缘的外边缘。如果有行框,则浮动框的外部顶部与当前行框的顶部对齐。
浮动元素影响它们周围的元素,绝对定位的元素不会。
关于绝对定位的在绝对定位模型中,框相对于其包含块明确偏移。 它完全从正常流程中删除 (它对后来的兄弟姐妹没有影响)。
注意区别?
因此,clearfix(或间隙)仅影响浮动元素。 clearfix不用于 clear 浮动元素,它用于包含浮动元素在另一个元素中。
有一篇关于CSS-Tricks的精彩文章解释了All About Floats,并介绍了它们与定位之间的差异。
答案 1 :(得分:0)
FLOAT: 浮动元素时,元素不会被取出。 Float不会从文档的流中删除元素。
位置绝对: 当您定位元素时,元素将被取出(放置在其他元素之上)。 绝对定位会从文档的流中删除元素。给定绝对定位的元素将不再影响文档中其他元素的布局。
这是您可以轻松理解的最佳示例:Check this