關於清除浮動的n中方式

我們在對頁面進行布局的時候經常會用到浮動布局，浮動布局能夠很好的實現我們想要的布局效果，同時相容方面也是很好的，但是當我們在用左右浮動進行頁面布局的時候，由於元素浮動脫了了文件流導致浮動元素的父級高度塌陷而導致元素到高度不是我們理想的狀態，在這個時候我們就要使用清除浮動的方法來讓父元素的高度能夠正常按照預期顯示；

我們在清除浮動的時候有很多種實現方法，下面我列舉一些常用的清楚浮動的方法：

1、給父元素新增overflow:hidden;這是乙個最簡單最粗暴的清除浮動的方式；

優點：**簡單只需要乙個css屬性就能搞定；

缺點：也很明顯，由於給父元素設定了多餘擷取，導致想實現一些效果無法正常工作，比如說新增滑鼠經過自定義的提示樣式；

1

2<
div 
class
="box"
>
3<
div 
class
="left"
>left
div>
4<
div 
class
="right"
>right
div>
5div
>67
<
style
>
8.left
12.right
16.box
19.clear
22style
>

2、在父級的最後新增乙個空元素，然後給空元素設定clear:both;

優點：理解簡單，同時相容也不錯；

缺點：就是多增加了乙個多餘的元素，**成本高；

1

2<
div 
class
="box"
>
3<
div 
class
="left"
>left
div>
4<
div 
class
="right"
>right
div>
5<
div 
class
="clear"
>
div>
6div
>
7<
style
>
8.left
12.right
16.clear
19style
>

3、通過父級的偽元素來實現:after或者是::after

優點：不用額外增加標籤元素，同事也解決了方法一種的不足；

缺點：理解起來不容易，相容方面ie8以上瀏覽器支援偽元素選擇器單冒號形式

1

2<
div 
class
="box"
>
3<
div 
class
="left"
>left
div>
4<
div 
class
="right"
>right
div>
5div
>67
<
style
>
8.left
12.right
16.box:after
21style
>

CSS 清除浮動的N種方式

清除浮動主要是為了解決，父元素因為子級元素浮動引起的內部高度為0的問題。舉個例子 class content class incont div div content incont 此時元素是這樣的 如果我們讓其中的子元素浮動，那麼就會變成下面這樣，我們會發現父元素的內容區的高度不見了 接下來我們要...

清除浮動方式

1 當父元素不設定高度時，標準流中內容高度為父元素的高度 2 但是若為浮動流，浮動流的高度不為父元素的高度。為第乙個標籤設定高度。但是這種方式並不常用，所以一般情況下不會使用。使用clear屬性來清除浮動。clear共有四個取值 none 不進行清除 left 讓浮動元素不去尋找前面左浮動的元素 r...

清除浮動的方式

現在許多 都是採用浮動的方式來編寫網頁，所以清楚如何清除浮動就顯得尤為重要。下面介紹清除浮動的六種方法。給第乙個盒子設定高度 標準流的元素會撐起父元素的高度，但是浮動流的元素是不會撐起父元素的高度的。第乙個盒子的元素全部浮動，所以導致第乙個盒子高度為0，也就是說body中第乙個元素為空，這樣第二個盒...