为什么要清除浮动
如果父级元素未设置高度,子元素不浮动父元素高度是自动撑开的。但是当子元素浮动时,因为**浮动元素脱离文档流!**无法撑开父元素,并且浮动元素设置的magin值不能正确显示
<div class="wrapper">
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
</div>
消除浮动的方法
(按照个人使用习惯介绍)
父元素添加伪元素 :after
.wrapper:after{
content: '';
display: block;
height: 0;
clear: both;
visibility: hidden;
}
父元素添加float
.wrapper{
border: 1px dashed red;
padding: 20px;
float: left;
}
父元素 overflow:auto/hidden;
auto 和 hidden 可以达到同样的效果,区别是SEO优化。
BTW,添加zoom:1;处理兼容问题
最后添加一个空元素
<div style="clear:both;"></div>
– End