清除浮动的影响

前言：网上有很多很好的例子，我这里只是记下自己的理解和感悟

先看下浮动：

代码：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>第一种</title>
 6     <style>
 7         #box {
 8             border: solid;
 9         }
10 
11         .con {
12             float: left;
13             width: 100px;
14             height: 100px;
15         }
16 
17         .con1 {
18             background: red;
19         }
20 
21         .con2 {
22             background: green;
23         }
24 
25         .con3 {
26             background: blue;
27         }
28     </style>
29 </head>
30 <body>
31 <div id="box">
32     <div class="con con1"></div>
33     <div class="con con2"></div>
34     <div class="con con3"></div>
35 </div>
36 </body>
37 </html>

效果：

如图，子元素跑到父级元素外面去了（大逆不道！）

下面我就替天行道，

劝说：（不常用）

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>第一种</title>
 6     <style>
 7         #box {
 8             border: solid;
 9         }
10 
11         .con {
12             float: left;
13             width: 100px;
14             height: 100px;
15         }
16 
17         .con1 {
18             background: red;
19         }
20 
21         .con2 {
22             background: green;
23         }
24 
25         .con3 {
26             background: blue;
27         }
28 
29         .clear {
30             clear: both;
31         }
32     </style>
33 </head>
34 <body>
35 <div id="box">
36     <div class="con con1"></div>
37     <div class="con con2"></div>
38     <div class="con con3"></div>
39     <div class="clear"></div>
40 </div>
41 </body>
42 </html>

效果：

告诉他们父亲：（难以实现下面图片的效果，头像溢出了，隐藏就没了╮(╯▽╰)╭）

代码：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>第一种</title>
 6     <style>
 7         #box {
 8             border: solid;
 9             overflow: hidden;
10         }
11 
12         .con {
13             float: left;
14             width: 100px;
15             height: 100px;
16         }
17 
18         .con1 {
19             background: red;
20         }
21 
22         .con2 {
23             background: green;
24         }
25 
26         .con3 {
27             background: blue;
28         }
29 
30     </style>
31 </head>
32 <body>
33 <div id="box">
34     <div class="con con1"></div>
35     <div class="con con2"></div>
36     <div class="con con3"></div>
37 </div>
38 </body>
39 </html>

直接硬扛：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>第一种</title>
 6     <style>
 7         #box {
 8             border: solid;
 9             zoom: 1;
10             /*处理兼容*/
11         }
12 
13         #box:after{
14             clear: both;
15             content: ".";
16             display: block;
17             width: 0;
18             height: 0;
19             visibility: hidden;
20         }
21 
22         .con {
23             float: left;
24             width: 100px;
25             height: 100px;
26         }
27 
28         .con1 {
29             background: red;
30         }
31 
32         .con2 {
33             background: green;
34         }
35 
36         .con3 {
37             background: blue;
38         }
39 
40     </style>
41 </head>
42 <body>
43 <div id="box">
44     <div class="con con1"></div>
45     <div class="con con2"></div>
46     <div class="con con3"></div>
47 </div>
48 </body>
49 </html>