1、标准文档流下的div的显示特点：
现有3个div，父级div css样式命名为：divmain，同级子div css样式分别命名为：div-left，div-right。
当我们不使用div浮动的时候，正常文档流(normal document)情况下，代码及显示效果如下所示：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 5 <meta charset="UTF-8"> 6 <title>css float学习</title> 7 <style type="text/css"> 8 .divmain{ 9 margin-left: 30px; 10 background-color: #FFA500; 11 width:400px; 12 border: 1px solid #FF0000; 13 } 14 .div-left, .div-right{ 15 background-color: #FFF; 16 width: 180px; 17 height: 100px; 18 border: 1px solid #000; 19 } 20 21 </style> 22 </head> 23 <body> 24 <!--HTML div测试--> 25 <div class="divmain"> 26 <div class="div-left">div left浮动</div> 27 <div class="div-right">div right浮动</div> 28 </div> 29 </body> 30 </html>
由上图我们可以很明显的看到，父级div(divmain)可以包容两个子div(div-left，div-right)，并按照正常标准文档流的特点，块级元素独行显示，并自上而下
的显示在浏览器页面上。
2、子div加入float浮动后的表现形式：
现将子div(div-left，div-right)，分别设置float:left，和float:right属性，然后来查看一下在浏览上的表现。
代码及显示效果如下所示：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 5 <meta charset="UTF-8"> 6 <title>css float学习</title> 7 <style type="text/css"> 8 .divmain{ 9 margin-left: 30px; 10 background-color: #FFA500; 11 width:400px; 12 border: 1px solid #FF0000; 13 } 14 .div-left, .div-right{ 15 background-color: #FFF; 16 width: 180px; 17 height: 100px; 18 border: 1px solid #000; 19 } 20 .div-left{ 21 float: left; 22 } 23 .div-right{ 24 float: right; 25 } 26 </style> 27 </head> 28 <body> 29 <!--HTML div测试--> 30 <div class="divmain"> 31 <div class="div-left">div left浮动</div> 32 <div class="div-right">div right浮动</div> 33 </div> 34 </body> 35 </html>
由上图我们可以观察到，设置子div左右浮动后，原来的子div由原来的自上而下排列，变成在同行显示。导致父级div不能被撑开（在实际css布局中，父级div是不用设置高度的，高度是随内容增加自适应高度。此案例中，父级div并没有设置height高度）。那怎么样解决在子元素设置float浮动情况下，父级div才能正常的包容子div呢？下面就是我们要讲的重要的内容，清除浮动方法。
3、清除浮动的方法和技巧：
1、给父级div设置合适的高度
我们可以根据子级div内容高度确认父级div的高度。在本案例中，子级div的内容高度为100px+2px上下边框。所以我们设置父级div的高度为102px;
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 5 <meta charset="UTF-8"> 6 <title>css float学习</title> 7 <style type="text/css"> 8 .divmain{ 9 margin-left: 30px; 10 background-color: #FFA500; 11 width:400px; 12 height: 102px; 13 border: 1px solid #FF0000; 14 } 15 .div-left, .div-right{ 16 background-color: #FFF; 17 width: 180px; 18 height: 100px; 19 border: 1px solid #000; 20 } 21 .div-left{ 22 float: left; 23 } 24 .div-right{ 25 float: right; 26 } 27 </style> 28 </head> 29 <body> 30 <!--HTML div测试--> 31 <div class="divmain"> 32 <div class="div-left">div left浮动</div> 33 <div class="div-right">div right浮动</div> 34 </div> 35 </body> 36 </html>
2、通过clear:both
我们在父级div中，增加一个div，并将其css样式命名为clear；并为这个div增添属性：clear:both;
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 5 <meta charset="UTF-8"> 6 <title>css float学习</title> 7 <style type="text/css"> 8 .divmain{ 9 margin-left: 30px; 10 background-color: #FFA500; 11 width:400px; 12 border: 1px solid #FF0000; 13 } 14 .div-left, .div-right{ 15 background-color: #FFF; 16 width: 180px; 17 height: 100px; 18 border: 1px solid #000; 19 } 20 .div-left{ 21 float: left; 22 } 23 .div-right{ 24 float: right; 25 } 26 .clear{ 27 clear: both; 28 } 29 </style> 30 </head> 31 <body> 32 <!--HTML div测试--> 33 <div class="divmain"> 34 <div class="div-left">div left浮动</div> 35 <div class="div-right">div right浮动</div> 36 <div class="clear"></div> 37 </div> 38 </body> 39 </html>
3、父级div设置overflow:hidden
在父级div中，加入样式：overflow:hidden,可以清除父级div使用float产生的浮动。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 5 <meta charset="UTF-8"> 6 <title>css float学习</title> 7 <style type="text/css"> 8 .divmain{ 9 margin-left: 30px; 10 background-color: #FFA500; 11 width:400px; 12 border: 1px solid #FF0000; 13 overflow: hidden; 14 } 15 .div-left, .div-right{ 16 background-color: #FFF; 17 width: 180px; 18 height: 100px; 19 border: 1px solid #000; 20 } 21 .div-left{ 22 float: left; 23 } 24 .div-right{ 25 float: right; 26 } 27 </style> 28 </head> 29 <body> 30 <!--HTML div测试--> 31 <div class="divmain"> 32 <div class="div-left">div left浮动</div> 33 <div class="div-right">div right浮动</div> 34 </div> 35 </body> 36 </html>