清除浮動的常用4種方式
阿新 • • 發佈:2020-09-16
1,額為標籤法:(隔牆法)
在父級元素裡面,給浮動元素的最後一個新增一個空標籤(必須是塊級元素才行),標籤新增clear:both;屬性;
2,父級新增overflow屬性:
可以給父元素新增overflow屬性:值可以設定為hidden,auto,scroll屬性
3,父級元素新增after偽元素:在父級元素裡面浮動的子元素的最後面新增一個偽元素
1 .clearfix:after { 2 3 content:"; 4 display:block; 5 height:0; 6 clear:both; 7 visibility:hidden;8 } 9 10 . .clearfix{ /*IE6,7專有*/ 11 *zoom:1; 12 13 }
4,父級元素新增雙偽元素:在父級元素裡面浮動的元素最前面和最後面都新增一個偽元素
1 .clearfix:before, .clearfix:after { 2 3 content:"; 4 5 display:table; 6 7 } 8 9 .clearfix:after{ 10 11 clear:both; 12 } 13 14 . .clearfix{ /*IE6,7專有*/ 15 16*zoom:1; 17 18 }