清除浮动
不清楚浮动会造成页面布局的混乱,我们想要做的就是闭合浮动。
额外标签法 (隔墙法)
.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>