清除浮动

清除浮动主要是为了解决父级元素因为子级浮动而引起的内部高度为0的情况。

清除浮动的方法有很多种，这里我只写被大家推荐切常用的方法。

1、父级添加伪类

// html部分 <div class='father'> <div class="left"></div> <div class="right"></div> </div> // css部分 .father:after{ display: block; content: ''; clear: both; } .left{ width: 200px; heght: 100px; float: left; } .right{ width: 200px; heght: 100px; float: right; }

2、父级添加overflow属性

可以通过触发BFC的方式，可以实现清除浮动效果

// html部分 <div class='father'> <div class="left"></div> <div class="right"></div> </div> // css部分 .father{ overflow: hidden; } .left{ width: 200px; heght: 100px; float: left; } .right{ width: 200px; heght: 100px; float: right; }

 

转载于:https://www.cnblogs.com/00feixi/p/11269410.html

相关资源：浮动从何而来 我们为何要清除浮动 清除浮动的原理是什么