CSS 清除浮动

一、总结

一句话总结：

清除浮动主要为了解决父级元素因为子级浮动引起内部高度为 0 的问题（高度塌陷）。

1、为什么要清除浮动？

浮动本质是用来做文字混排效果的，但是拿来做布局用，则会出现一些问题，比如高度塌陷。

二、CSS 清除浮动

转自或参考：CSS 清除浮动
https://www.cnblogs.com/niujifei/p/11212184.html

一、为什么要清除浮动

　　浮动本质是用来做文字混排效果的，但是拿来做布局用，则会有很多的问题出现。

　　由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响，为了解决这些问题，就需要在该元素中清除浮动，准确地说，并不是清除浮动，而是清除浮动后造成的影响。

二、清除浮动的本质

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

三、清除浮动的方法

　　　清除浮动本质叫做闭合浮动更好一些。清除浮动就是把浮动的盒子圈到里面，让父盒子闭合出口和入口不让他们出来影响其他元素。

　　　clear 属性用于清除浮动，其基本语法格式如下：

选择器 {clear:属性值;}

属性值	描述
left	不允许左侧有浮动元素（清除左侧浮动的影响）
right	不允许右侧有浮动元素（清除右侧浮动的影响）
both	同时清除左右两侧浮动的影响

方法1：给父级 div 定义 height

Demo：

 1 <style type="text/css"> 
 2 .div1{background:#000080;border:1px solid red;/*解决代码*/height:200px;} 
 3 .div2{background:#800080;border:1px solid red;height:100px;margin-top:10px} 
 4 .left{float:left;width:20%;height:200px;background:#DDD} 
 5 .right{float:right;width:30%;height:80px;background:#DDD} 
 6 </style> 
 7 <div class="div1"> 
 8　　 <div class="left">Left</div> 
 9 　　<div class="right">Right</div> 
10 </div> 
11 <div class="div2"> 
12 div2 
13 </div>

　　　　　原理：父级 div 手动定义 height，就解决了父级 div 无法自动获取高度的问题。

　　　　　优点：简单，代码少，容易掌握

　　　　　缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级 div 不一样时，会产生问题。

　　　　　建议：不推荐使用，只建议高度固定的布局时使用

方法2：结尾处加空 div 标签 clear:both

Demo:

 1 <style type="text/css"> 
 2 .div1{background:#000080;border:1px solid red} 
 3 .div2{background:#800080;border:1px solid red;height:100px;margin-top:10px} 
 4 .left{float:left;width:20%;height:200px;background:#DDD} 
 5 .right{float:right;width:30%;height:80px;background:#DDD} 
 6 /*清除浮动代码*/ 
 7 .clearfloat{clear:both} 
 8 </style> 
 9 <div class="div1"> 
10 　　<div class="left">Left</div> 
11 　　<div class="right">Right</div> 
12 　　<div class="clearfloat"></div> 
13 </div> 
14 <div class="div2"> 
15 div2 
16 </div>

　　　　　原理：添加一个空 div，利用 CSS 提供的 clear:both 清除浮动，让父级 div 能自动获取高度。

　　　　优点：简单，代码少，浏览器支持好，不容易出现怪问题

　　　　　缺点：如果页面浮动布局多，就要增加很多空 div ,添加很多不必要的标签

　　　　　建议：不推荐使用，但次方法是以前主要使用的一种清除浮动方法　　

方法3：使用 after伪元素和 zoom来清除浮动（推荐使用）

Demo：

 1 <style type="text/css"> 
 2 .div1{background:#000080;border:1px solid red;} 
 3 .div2{background:#800080;border:1px solid red;height:100px;margin-top:10px} 
 4 .left{float:left;width:20%;height:200px;background:#DDD} 
 5 .right{float:right;width:30%;height:80px;background:#DDD} 
 6 /*清除浮动代码*/ 
 7 .clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0} 
 8 .clearfloat{zoom:1} 
 9 </style> 
10 <div class="div1 clearfloat"> 
11 　　<div class="left">Left</div> 
12 　　<div class="right">Right</div> 
13 </div> 
14 <div class="div2"> 
15 div2 
16 </div>

　　　　　原理：IE8 以上和非 IE 浏览器才支持 :after,原理和方法2相似， zoom(IE专有属性，浏览器骇客) 可解决 IE6，IE7浮动问题。

　　　　　优点：浏览器支持好，不容易出现怪异问题。

　　　　　缺点：代码多，需要两句代码结合使用才能让主流浏览器支持。使用 zoom:1触发 hasLayout。

　　　　　建议：推荐使用，建议定义公共类，来减少 CSS 代码。

方法4：父级 div 定义 overflow:hidden

Demo:

 1 <style type="text/css"> 
 2 .div1{background:#000080;border:1px solid red;/*解决代码*/width:98%;overflow:hidden} 
 3 .div2{background:#800080;border:1px solid red;height:100px;margin-top:10px;width:98%} 
 4 .left{float:left;width:20%;height:200px;background:#DDD} 
 5 .right{float:right;width:30%;height:80px;background:#DDD} 
 6 </style> 
 7 <div class="div1"> 
 8 　　<div class="left">Left</div> 
 9 　　<div class="right">Right</div> 
10 </div> 
11 <div class="div2"> 
12 div2 
13 </div>

　　　　　原理：必须定义 width 或 zoom:1,同时不能定义 height,使用 overflow:hidden 时，浏览器会自动检查浮动区域的高度。

　　　　　优点：简单，代码少，浏览器支持好。

　　　　　缺点：不能和 position 配合使用，因为超付的尺寸的会被隐藏。

　　　　　建议：只推荐没有使用 position 或对 overflow:hidden 理解深刻的朋友使用。

方法5：父级 div 定义 overflow：auto

Demo:

 1 <style type="text/css"> 
 2 .div1{background:#000080;border:1px solid red;/*解决代码*/width:98%;overflow:auto} 
 3 .div2{background:#800080;border:1px solid red;height:100px;margin-top:10px;width:98%} 
 4 .left{float:left;width:20%;height:200px;background:#DDD} 
 5 .right{float:right;width:30%;height:80px;background:#DDD} 
 6 </style> 
 7 <div class="div1"> 
 8 　　<div class="left">Left</div> 
 9 　　<div class="right">Right</div> 
10 </div> 
11 <div class="div2"> 
12 div2 
13 </div>

　　　　　原理：必须定义 width 或 zoom:1,同时不能定义 height，使用 overflow:auto 时，浏览器会自动检查浮动区域的高度。

　　　　　优点：简单、代码少、浏览器支持好。

　　　　　缺点：内部宽高超过父级 div 时，会出现滚动条。

　　　　　建议：不推荐使用，除非需要出现滚动条或者确保不会滚动条的时候才使用。

方法6：父级 div 也一起浮动

Demo：

 1 <style type="text/css"> 
 2 .div1{background:#000080;border:1px solid red;/*解决代码*/width:98%;margin-bottom:10px;float:left} 
 3 .div2{background:#800080;border:1px solid red;height:100px;width:98%;/*解决代码*/clear:both} 
 4 .left{float:left;width:20%;height:200px;background:#DDD} 
 5 .right{float:right;width:30%;height:80px;background:#DDD} 
 6 </style> 
 7 <div class="div1"> 
 8 <div class="left">Left</div> 
 9 <div class="right">Right</div> 
10 </div> 
11 <div class="div2"> 
12 div2 
13 </div>

　　　　　原理：所有代码一起浮动。就变成了一个整体。

　　　　　优点：没有优点。

　　　　　缺点：会产生新的浮动问题。

　　　　　建议：不推荐使用，只做了解。

方法7：父级 div 定义 display:table

Demo:

 1 <style type="text/css"> 
 2 .div1{background:#000080;border:1px solid red;/*解决代码*/width:98%;display:table;margin-bottom:10px;} 
 3 .div2{background:#800080;border:1px solid red;height:100px;width:98%;} 
 4 .left{float:left;width:20%;height:200px;background:#DDD} 
 5 .right{float:right;width:30%;height:80px;background:#DDD} 
 6 </style> 
 7 <div class="div1"> 
 8 <div class="left">Left</div> 
 9 <div class="right">Right</div> 
10 </div> 
11 <div class="div2"> 
12 div2 
13 </div>

　　　　　原理：将 div 属性变成表格。

　　　　　优点：没有优点。

　　　　　确点：会产出新的未知问题。

　　　　　建议：不推荐使用，只做了解。

方法8：结尾处加 br 标签 clear:both

Demo:

 1 <style type="text/css"> 
 2 .div1{background:#000080;border:1px solid red;margin-bottom:10px;zoom:1} 
 3 .div2{background:#800080;border:1px solid red;height:100px} 
 4 .left{float:left;width:20%;height:200px;background:#DDD} 
 5 .right{float:right;width:30%;height:80px;background:#DDD} 
 6 .clearfloat{clear:both} 
 7 </style> 
 8 <div class="div1"> 
 9 <div class="left">Left</div> 
10 <div class="right">Right</div> 
11 <br class="clearfloat" /> 
12 </div> 
13 <div class="div2"> 
14 div2 
15 </div>

　　　　　原理：父级 div 定义 zoom:1 来解决IE浮动问题，结尾处加 br 标签 clear:both

　　　　　建议：不推荐使用，只做了解　　

方法9：使用 before 和 after 双伪元素清除浮动（推荐使用）

Demo：

 1 <style type="text/css"> 
 2 .div1{background:#000080;border:1px solid red;} 
 3 .div2{background:#800080;border:1px solid red;height:100px;margin-top:10px} 
 4  .left{float:left;width:20%;height:200px;background:#DDD} 
 5 .right{float:right;width:30%;height:80px;background:#DDD} 
 6  /*清除浮动代码*/ 
 7 .clearfix:before,.clearfix:after { 
 8   content:"";
 9   display:table;  /* 这句话可以出发BFC BFC可以清除浮动 */
10 }
11 .clearfix:after {
12  clear:both;
13 }
14 .clearfix {
15   *zoom:1;
16 }
17  </style> 
18 <div class="div1 clearfloat"> 
19  　　<div class="left">Left</div> 
20 　　 <div class="right">Right</div> 
21 </div> 
22 <div class="div2"> 
23  div2 
24 </div>

　　　　　　原理：同方法2

　　　　　　优点：代码更简洁

　　　　　　缺点：由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。

　　　　　　建议：推荐使用，完美

更多的知识请参考这篇文章：清除浮动