html清除浮動的幾種方式
阿新 • • 發佈：2019-01-07
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
方法一（使用空標籤帶clear屬性）標籤可以是div br hr
在浮動元素後使用一個空元素如<div class="clear"></div>，
並在CSS中賦予.clear{clear:both;}屬性即可清理浮動。亦可使用<br class="clear" />
或<hr class="clear" />來進行清理。
優點：簡單，程式碼少，瀏覽器相容性好。
缺點：需要新增大量無語義的html元素，程式碼不夠優雅，後期不容易維護。
在浮動元素下加<div class="clear"></div>
.clear{ height:0px;font-size:0;clear:both;}但是在ie6下，塊元素有最小高度，即當height<19px時，預設為19px，
解決方法：font-size:0;或overflow:hidden;
在浮動元素下加<br clear="all">用以清除浮動
方法二（給浮動元素的父元素新增overflow屬性）（zoom:1）
此方法有效地解決了通過空標籤元素清除浮動而不得不增加無意程式碼的弊端。
使用該方法是隻需在需要清除浮動的元素中定義CSS屬性：overflow:auto，即可!
overflow:auto;是讓高度自適應，zoom:1;是為了相容IE6，也可以用height:1%;的方式來解決，
注意，zoom不符合W3C標準。overflow:hidden也可以實現。
<ul style="overflow:auto;zoom:1>
<li>AAA</li>
<li>BBB</li>
<li>CCC</li>
</ul>
方法三：（給浮動的元素的容器新增浮動）
<!--為父級新增float來清楚浮動-->
<div style="float: right;background-color: #1a1a1a;">
<div style="float: right;width: 300px;height: 300px;background-color: #2a85a0;">
</div>
<div style="width: 500px;height: 200px;background-color: #8a6d3b">
</div>
</div>
給浮動元素的容器也新增上浮動屬性即可清除內部浮動，但是這樣會使其整體浮動，影響佈局，不推薦使用。
方法四： （使用after偽物件清除浮動）
after 偽元素（注意這不是偽類，而是偽元素，代表一個元素之後最近的元素）和 IEhack ，
可以完美相容當前主流的各大瀏覽器，這裡的 IEhack 指的是觸發 hasLayout。
通過after偽元素實現元素末尾新增一個看不見的塊元素（Block element）清理浮動。
通過CSS偽元素在容器的內部元素最後添加了一個看不見的空格""或點"."，並且賦予clear屬性來清除浮動。需要注意的是為了IE6和IE7瀏覽器，要給clearfix這個class新增一條zoom:1;觸發haslayout。
after偽物件非IE瀏覽器支援，所以並不影響到IE/WIN瀏覽器。具體寫法可參照以下示例。使用中需注意以下幾點。
一、該方法中必須為需要清除浮動元素的偽物件中設定height:0，否則該元素會比實際高出若干畫素；
二、content屬性是必須的，但其值可以為空，藍色理想討論該方法的時候content屬性的值設為"."，
<style type="text/css"> .listinfo:after{display:block;clear:both;content:"";
visibility:hidden;height:0;} c< class="listinfo">/
<li>AAA</li>
<li>BBB</li>
<li>CCC</li>
</ul>
方法五：使用鄰接元素處理
什麼都不做，給浮動元素後面的元素新增clear屬性。
方法與新增一個空標籤類似，只是此處用浮動元素緊鄰的元素
推薦!!!
在網頁主要佈局時使用:after偽元素方法並作為主要清理浮動方式；在小模組如ul裡使用overflow:hidden;（留意可能產生的隱藏溢位元素問題）；如果本身就是浮動元素則可自動清除內部浮動，無需格外處理；正文中使用鄰接元素清理之前的浮動。
最後可以使用相對完美的:after偽元素方法清理浮動，文件結構更加清晰;
雙倍邊距bug處理 IE6 時，另一個需要記住的事情是，如果在和浮動方向相同的方向上設定外邊距(margin)，會引發
雙倍邊距
。快速修正：給浮動設定 display:inline; 而且不用擔心，它依然是塊級元素。
3畫素間距是指挨著浮動元素的文字會神奇的被踢出去3畫素，好像浮動元素的周圍有一個奇怪的力場一樣。快速修正：在受影響的文字上設定寬度或高度。
IE7 中，底邊距 bug是當浮動父元素有浮動子元素時，這些子元素的底邊距會被父元素忽略掉。快速修正：用父元素的底內補白(padding)代替。
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
方法一（使用空標籤帶clear屬性）標籤可以是div br hr
在浮動元素後使用一個空元素如<div class="clear"></div>，
並在CSS中賦予.clear{clear:both;}屬性即可清理浮動。亦可使用<br class="clear" />
或<hr class="clear" />來進行清理。
優點：簡單，程式碼少，瀏覽器相容性好。
缺點：需要新增大量無語義的html元素，程式碼不夠優雅，後期不容易維護。
在浮動元素下加<div class="clear"></div>
.clear{ height:0px;font-size:0;clear:both;}但是在ie6下，塊元素有最小高度，即當height<19px時，預設為19px，
解決方法：font-size:0;或overflow:hidden;
在浮動元素下加<br clear="all">用以清除浮動
方法二（給浮動元素的父元素新增overflow屬性）（zoom:1）
此方法有效地解決了通過空標籤元素清除浮動而不得不增加無意程式碼的弊端。
使用該方法是隻需在需要清除浮動的元素中定義CSS屬性：overflow:auto，即可!
overflow:auto;是讓高度自適應，zoom:1;是為了相容IE6，也可以用height:1%;的方式來解決，
注意，zoom不符合W3C標準。overflow:hidden也可以實現。
<ul style="overflow:auto;zoom:1>
<li>AAA</li>
<li>BBB</li>
<li>CCC</li>
</ul>
方法三：（給浮動的元素的容器新增浮動）
<!--為父級新增float來清楚浮動-->
<div style="float: right;background-color: #1a1a1a;">
<div style="float: right;width: 300px;height: 300px;background-color: #2a85a0;">
</div>
<div style="width: 500px;height: 200px;background-color: #8a6d3b">
</div>
</div>
給浮動元素的容器也新增上浮動屬性即可清除內部浮動，但是這樣會使其整體浮動，影響佈局，不推薦使用。
方法四： （使用after偽物件清除浮動）
after 偽元素（注意這不是偽類，而是偽元素，代表一個元素之後最近的元素）和 IEhack ，
可以完美相容當前主流的各大瀏覽器，這裡的 IEhack 指的是觸發 hasLayout。
通過after偽元素實現元素末尾新增一個看不見的塊元素（Block element）清理浮動。
通過CSS偽元素在容器的內部元素最後添加了一個看不見的空格""或點"."，並且賦予clear屬性來清除浮動。需要注意的是為了IE6和IE7瀏覽器，要給clearfix這個class新增一條zoom:1;觸發haslayout。
after偽物件非IE瀏覽器支援，所以並不影響到IE/WIN瀏覽器。具體寫法可參照以下示例。使用中需注意以下幾點。
一、該方法中必須為需要清除浮動元素的偽物件中設定height:0，否則該元素會比實際高出若干畫素；
二、content屬性是必須的，但其值可以為空，藍色理想討論該方法的時候content屬性的值設為"."，
<style type="text/css"> .listinfo:after{display:block;clear:both;content:"";
visibility:hidden;height:0;} c< class="listinfo">/
<li>AAA</li>
<li>BBB</li>
<li>CCC</li>
</ul>
方法五：使用鄰接元素處理
什麼都不做，給浮動元素後面的元素新增clear屬性。
方法與新增一個空標籤類似，只是此處用浮動元素緊鄰的元素
推薦!!!
在網頁主要佈局時使用:after偽元素方法並作為主要清理浮動方式；在小模組如ul裡使用overflow:hidden;（留意可能產生的隱藏溢位元素問題）；如果本身就是浮動元素則可自動清除內部浮動，無需格外處理；正文中使用鄰接元素清理之前的浮動。
最後可以使用相對完美的:after偽元素方法清理浮動，文件結構更加清晰;
雙倍邊距bug處理 IE6 時，另一個需要記住的事情是，如果在和浮動方向相同的方向上設定外邊距(margin)，會引發
雙倍邊距
。快速修正：給浮動設定 display:inline; 而且不用擔心，它依然是塊級元素。
3畫素間距是指挨著浮動元素的文字會神奇的被踢出去3畫素，好像浮動元素的周圍有一個奇怪的力場一樣。快速修正：在受影響的文字上設定寬度或高度。
IE7 中，底邊距 bug是當浮動父元素有浮動子元素時，這些子元素的底邊距會被父元素忽略掉。快速修正：用父元素的底內補白(padding)代替。
</body>
</html>