html css布局之float浮动清除

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>
View Code

由上图我们可以很明显的看到，父级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>
View Code

由上图我们可以观察到，设置子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>
View Code

 

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>
View Code

 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>
View Code

 

posted @ 2017-07-09 11:16  云帆济海2017  阅读(624)  评论(0)  编辑  收藏  举报