关于清除浮动的n中方式

我们在对页面进行布局的时候经常会用到浮动布局，浮动布局能够很好的实现我们想要的布局效果，同时兼容方面也是很好的，但是当我们在用左右浮动进行页面布局的时候，由于元素浮动脱了了文档流导致浮动元素的父级高度塌陷而导致元素到高度不是我们理想的状态，在这个时候我们就要使用清除浮动的方法来让父元素的高度能够正常按照预期显示；

我们在清除浮动的时候有很多种实现方法，下面我列举一些常用的清楚浮动的方法：

1、给父元素添加overflow:hidden;这是一个最简单最粗暴的清除浮动的方式；

　　优点：代码简单只需要一个css属性就能搞定；

　　缺点：也很明显，由于给父元素设置了多余截取，导致想实现一些效果无法正常工作，比如说添加鼠标经过自定义的提示样式；

 1 <!-- html部分 -->
 2 <div class="box">
 3     <div class="left">left</div>
 4     <div class="right">right</div>
 5 </div>
 6 <!-- css部分 -->
 7 <style>
 8 .left{
 9     float: left;
10     height: 300px;
11 }
12 .right{
13     float: right;
14     height: 400px;
15 }
16 .box{
17     overflow:hidden;
18 }
19 .clear{
20     clear: both;
21 }
22 </style>

  

2、在父级的最后添加一个空元素，然后给空元素设置clear:both;

　　优点：理解简单，同时兼容也不错；

　　缺点：就是多增加了一个多余的元素，代码成本高；

 

 1 <!-- html部分 -->
 2 <div class="box">
 3     <div class="left">left</div>
 4     <div class="right">right</div>
 5     <div class="clear"></div>
 6 </div>
 7 <style>
 8 .left{
 9     float: left;
10     height: 300px;
11 }
12 .right{
13     float: right;
14     height: 400px;
15 }
16 .clear{
17     clear: both;
18 }
19 </style>

 

3、通过父级的伪元素来实现:after或者是::after

　　优点：不用额外增加标签元素，同事也解决了方法一种的不足；

　　缺点：理解起来不容易，兼容方面ie8以上浏览器支持伪元素选择器单冒号形式

 

 1 <!--html-->
 2 <div class="box">
 3     <div class="left">left</div>
 4     <div class="right">right</div>
 5 </div>
 6 <!--css-->
 7 <style>
 8 .left{
 9     float: left;
10     height: 300px;
11 }
12 .right{
13     float: right;
14     height: 400px;
15 }
16 .box:after{
17     content: '';
18     clear: both;
19     display: table;
20 }
21 </style>