清除浮动方法

清除浮动

不清楚浮动会造成页面布局的混乱，我们想要做的就是闭合浮动。

额外标签法 （隔墙法）

.clear {clear: both;}
<div>
    <div></div>
    <div></div>
    <div class="clear"></div>
</div>

添加了没有意义的标签，结构化较差。

添加的必须是快元素

父级添加 overflow 属性

<div class="clearfix">
    <div></div>
    <div></div>
    <div class="clear"></div>
</div>

无法显示溢出的部分.

父级添加 after 元素

.wrapper {overflow: hidden/auto/scroll};
<div class="wrapper">
    <div></div>
    <div></div>
    <div class="clear"></div>
</div>

父级添加伪元素 双伪元素

.clearfix:after,
.clearfix:before {
    content: '';
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    /* 兼容 IE6、7 专有 */
    *zoom: 1;
}
<div class="clearfix">
    <div></div>
    <div></div>
    <div class="clear"></div>
</div>