第三课 | 第二节 | 清浮动的方法

关于浮动，上一节我们说过了浮动的定义和特性及看了一个实例。大家不禁要问，

元素浮动后为什么要清浮动呢？

要解答这个问题，我们得先说说CSS中的定位机制：普通流，浮动，绝对定位 （其中"position:fixed" 是 "position:absolute" 的一个子类）。

一，普通流：很多人或者文章称之为文档流或者普通文档流，其实标准里根本就没有这个词。如果把文档流直译为英文就是 document flow ，但标准里只有另一个词，叫做 普通流 （normal flow)，或者称之为常规流。但似乎大家更习惯文档流的称呼，因为很多中文翻译的书就是这么来的。比如《CSS Mastery》，英文原书中至始至终都只有普通流 normal flow（普通流） 这一词，从来没出现过document flow （文档流）

二，浮动：浮动的框可以左右移动，直至它的外边缘遇到包含框或者另一个浮动框的边缘。浮动框不属于文档中的普通流，当一个元素浮动之后，不会影响到 块级框的布局而只会影响内联框（通常是文本）的排列，文档中的普通流就会表现得和浮动框不存在一样，当浮动框高度超出包含框的时候，也就会出现包含框不会 自动伸高来闭合浮动元素（“高度塌陷”现象）。顾名思义，就是漂浮于普通流之上，像浮云一样，但是只能左右浮动。

正是因为浮动的这种特性，导致本属于普通流中的元素浮动之后，包含框内部由于不存在其他普通流元素了，也就表现出高度为0（高度塌陷）。在实际布局中，往往这并不是我们所希望的，所以需要闭合浮动元素，使其包含框表现出正常的高度。

问题问完后，就要上主题了，清浮动的方法：

1，空标签清浮动；

CSS：

1. <style>  
2. body{margin:0;}  
3. .parent{width:600px; margin:0 auto;border:10px solid red;}  
4. .left{float:left; width:100px; height:400px; background:#FF0;}  
5. .center{float:left; width:300px;}  
6. .center div{height:200px;}  
7. .box1{background:#0CC;}  
8. .box2{background:#F9C;}  
9. .right{float:right; width:200px;}  
10. .right div{height:100px;}  
11. .box3{background:#690;}  
12. .box4{background:#f90;}  
13. .box5{background:#7c1;}  
14. .box6{background:#369;}  
15. .clear{height:0; clear:both;}  
16. </style> 
    

html：

1. <div class="parent">  
2.     <div class="left"></div>  
3.     <div class="center">  
4.         <div class="box1"></div>  
5.         <div class="box2"></div>  
6.     </div>  
7.     <div class="right">  
8.         <div class="box3"></div>  
9.         <div class="box4"></div>  
10.         <div class="box5"></div>  
11.         <div class="box6"></div>  
12.     </div>  
13.     <div class="clear"></div>  
14. </div

2,伪类清浮动；

CSS:

1. body{margin:0;}  
2. .parent{margin:0 auto; width:600px;border:10px solid red;}  
3. .left{float:left; width:100px; height:400px; background:#FF0;}  
4. .center{float:left; width:300px;}  
5. .center div{height:200px;}  
6. .box1{background:#0CC;}  
7. .box2{background:#F9C;}  
8. .right{float:right;width:200px;}  
9. .right div{height:100px;}  
10. .box3{background:#690;}  
11. .box4{background:#f90;}  
12. .box5{background:#7c1;}  
13. .box6{background:#369;}  
14. .clear{zoom:1;}/* ie6认识  ff不认识 */  
15. .clear:after{content:''; display:block; clear:both;}/* ie6不认识，其它的都认识 */  
16. </style>

html:

1. <div class="parent clear">  
2.     <div class="left"></div>  
3.     <div class="center">  
4.         <div class="box1"></div>  
5.         <div class="box2"></div>  
6.     </div>  
7.     <div class="right">  
8.         <div class="box3"></div>  
9.         <div class="box4"></div>  
10.         <div class="box5"></div>  
11.         <div class="box6"></div>  
12.     </div>  
13. </div> 
    

3,br清浮动；

css:

1. <style>  
2. body{margin:0;}  
3. .parent{width:600px; margin:0 auto;border:10px solid red;}  
4. .left{float:left; width:100px; height:400px; background:#FF0;}  
5. .center{float:left; width:300px;}  
6. .center div{height:200px;}  
7. .box1{background:#0CC;}  
8. .box2{background:#F9C;}  
9. .right{float:right; width:200px;}  
10. .right div{height:100px;}  
11. .box3{background:#690;}  
12. .box4{background:#f90;}  
13. .box5{background:#7c1;}  
14. .box6{background:#369;}  
15. </style> 
    

html:

1. <div class="parent">  
2.     <div class="left"></div>  
3.     <div class="center">  
4.         <div class="box1"></div>  
5.         <div class="box2"></div>  
6.     </div>  
7.     <div class="right">  
8.         <div class="box3"></div>  
9.         <div class="box4"></div>  
10.         <div class="box5"></div>  
11.         <div class="box6"></div>  
12.     </div>  
13.     <br clear="all" />  
14. </div> 
    

4,overflow:hidden清浮动;

css:

1. body{margin:0;}  
2. .parent{margin:0 auto; width:600px;border:10px solid red; overflow:hidden;}/* 父级必须有宽度 overflow:hidden才好使 */  
3. .left{float:left; width:100px; height:400px; background:#FF0;}  
4. .center{float:left; width:300px;}  
5. .center div{height:200px;}  
6. .box1{background:#0CC;}  
7. .box2{background:#F9C;}  
8. .right{float:right;width:200px;}  
9. .right div{height:100px;}  
10. .box3{background:#690;}  
11. .box4{background:#f90;}  
12. .box5{background:#7c1;}  
13. .box6{background:#369;}  
14. </style> 
    

html:

1. <div class="parent">  
2.     <div class="left"></div>  
3.     <div class="center">  
4.         <div class="box1"></div>  
5.         <div class="box2"></div>  
6.     </div>  
7.     <div class="right">  
8.         <div class="box3"></div>  
9.         <div class="box4"></div>  
10.         <div class="box5"></div>  
11.         <div class="box6"></div>  
12.     </div>  
13. </div> 
    

5，display：inline-block清浮动；

css:

1. <style>  
2. body{margin:0;}  
3. .parent{width:600px; margin:0 auto;border:10px solid red; display:inline-block;}  
4. .left{float:left; width:100px; height:400px; background:#FF0;}  
5. .center{float:left; width:300px;}  
6. .center div{height:200px;}  
7. .box1{background:#0CC;}  
8. .box2{background:#F9C;}  
9. .right{float:right; width:200px;}  
10. .right div{height:100px;}  
11. .box3{background:#690;}  
12. .box4{background:#f90;}  
13. .box5{background:#7c1;}  
14. .box6{background:#369;}  
15. </style> 
    

html:

1. <div class="parent">  
2.     <div class="left"></div>  
3.     <div class="center">  
4.         <div class="box1"></div>  
5.         <div class="box2"></div>  
6.     </div>  
7.     <div class="right">  
8.         <div class="box3"></div>  
9.         <div class="box4"></div>  
10.         <div class="box5"></div>  
11.         <div class="box6"></div>  
12.     </div>  
13. </div>