兩種好用的清除浮動的小技巧(clearfix hack)
阿新 • • 發佈:2018-11-16
方法一:使用內容生成的方式清除浮動
這種方法不能解決margin在垂直邊界上的疊加問題,如果不涉及margin的邊界疊加問題使用這種方法清除浮動就行了 。
1 /* 2 :after 選擇器向選定的元素之後插入內容 3 content:" "; (注意這裡有一個空格)生成內容為空 4 display: block; 5 clear:both; 清除前面元素浮動帶來的影響 6 */ 7 .clearfix:after { 8 content:""; 9 display: block; 10 clear:both; 11 }
方法二:使用偽元素方式清除浮動
bootstrap3.3.7中就使用這種方法清除浮動,這種方法程式碼比第一種多一點,不過它能解決margin在垂直邊界上的疊加問題。
盒子模型垂直方向的距離由margin決定。屬於同一個BFC(Block formatting context直譯為”塊級格式化上下文”)的兩個相鄰盒子的margin會發生重疊
注意:發生重疊後,外邊距的高度等於兩個發生重疊的外邊距的高度中的較大者。至於margin的邊界重疊和BFC的問題有很多資料可查我就不再贅述了。
1 /* 2 瀏覽器支援: Firefox 3.5+, Safari 4+, Chrome, Opera 9+, IE 8+3 1. content:" ";(注意這裡有一個空格)是為了避免Opera Bug的一種方法。 4 當contenteditable這個屬性包含在document中的任何地方時會導致空格符出現在元素的頂部和底部,這些空格符是需要清除的。 5 2. 當':before'需要包含其子元素的margin-top時,使用'table'替代'block'。 6 */ 7 .clearfix:before, 8 .clearfix:after { 9 content: " "; /* 1 */ 10 display: table; /* 2 */ 11 } 12 13 .clearfix:after{ 14 clear: both; 15 }
備註:
這兩種方法都不破壞文件結構也沒有什麼副作用相容性也好,網上也有其他清除浮動的方法,不過都有些弊端,這兩種相對更好一些。
參考文獻:
清除浮動 的多種方式(clearfix):https://blog.csdn.net/FE_dev/article/details/68954481
A new micro clearfix hack:http://nicolasgallagher.com/micro-clearfix-hack/