clearfix的清浮动的技巧

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title></title>
 6 <style type="text/css">
 7 .left,.right{
 8 width: 200px;
 9 height: 200px;
10 float: left;
11 }
12 .left{
13 background-color: brown;
14 }
15 .right{
16 background-color: cornflowerblue;
17 }
18 .header,.footer{
19 border: 10px solid red;
20 }
21 .header:after{
22 /*
23 利用伪元素:after清除浮动必备的条件,缺一不可
24 1.块级元素
25 2.clear:both
26 3.content:""
27 */
28 display: block;/*确保元素是一个块级元素*/
29 clear: both;/*不允许左右两边有浮动对象*/
30 content: "";/*这是伪元素:before和:after天生自带的属性,如果不写,伪元素不起作用*/
31 
32 /*写全的样式属性*/
33 height: 0;/*防止在低版本浏览器中height:1px的情况，我们用height:0去覆盖*/
34 font-size: 0;/*字体大小*/
35 overflow: hidden;/*溢出隐藏*/
36 visibility: hidden;/*让所有可见性的元素隐藏*/
37 }
38 
39 /*
40 共有class名
41 利用伪元素after清浮动的固定代码，只要清浮动，我们在浮动元素的父元素上加一个cleafix即可；
42 */
43 
44 .clearfix:after{
45 display: block;
46 clear: both;
47 content: "";
48 height: 0;
49 font-size: 0;
50 overflow: hidden;
51 visibility: hidden;
52 }
53 /*
54 思考题
55 overflow:hidden和visibility: hidden;有什么区别呢?
56 */
57 </style>
58 </head>
59 <body>
60 <div class="header">
61 <div class="left"></div>
62 <div class="right"></div>
63 </div>
64 <div class="footer clearfix">
65 <div class="left"></div>
66 <div class="right"></div>
67 </div>
68 </body>
69 </html>