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>