頁面布局中，我們經常會用到元素浮動，在很好的顯示效果的同時，也帶給我們帶來了許多副作用，比如影響其他元素位置。
那么，如何清除這些浮動呢？下面就為大家推薦幾種清除浮動的小方法：
一、空標簽清除浮動: .clear{clear:both}
1、clear語法：
clear : none|left|right|both
2、clear參數值說明：
none : 允許兩邊都可以有浮動對象
both : 不允許有浮動對象
left : 不允許左邊有浮動對象
right : 不允許右邊有浮動對象
3、示例：
<!DOCTYPE html>
<html>
<head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Examples</title> <meta name="description" content=""> <meta name="keywords" content=""> <style type="text/css"> .div1{background:pink;border:1px solid gray} .div2{background:lightgreen;border:1px solid gray;height:100px;margin-top:10px} .left{float:left;width:30%;height:160px;background:#eee} .right{float:right;width:30%;height:120px;background:#eee} .clearfloat{clear:both} </style> </head> <body> <div class="div1"> <div class="left">Left</div> <div class="right">Right</div> <div class="clearfloat"></div> </div> <div class="div2">div2</div> </body> </html>
4、優缺點：
優點：通俗易懂，容易掌握
缺點：會添加大量無語義標簽，結構與表現未分離，不利於維護
二、父元素設置overflow:hidden
1、overflow語法：
overflow : visible | hidden | scroll | auto | inherit
2、overflow參數值說明：
visible : 默認值。內容不會被修剪，會呈現在元素框之外。
hidden : 內容會被修剪，並且其余內容是不可見的。
scroll : 內容會被修剪，但是瀏覽器會顯示滾動條以便查看其余的內容。
auto : 如果內容被修剪，則瀏覽器會顯示滾動條以便查看其余的內容。
inherit : 規定應該從父元素繼承 overflow 屬性的值。
3、示例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Examples</title> <meta name="description" content=""> <meta name="keywords" content=""> <style type="text/css"> .div1{background:pink;border:1px solid gray;width:98%;overflow:hidden} .div2{background:lightgreen;border:1px solid gray;height:100px;margin-top:10px;width:98%;} .left{float:left;width:30%;height:160px;background:#eee} .right{float:right;width:30%;height:120px;background:#eee} </style> </head> <body> <div class="div1"> <div class="left">Left</div> <div class="right">Right</div> </div> <div class="div2">div2</div> </body> </html>
4、優缺點：
優點：不存在結構和語義化問題，代碼量少
缺點：內容增多時容易造成不會自動換行的后果，導致內容被隱藏，無法顯示需要一處的元素。
三、父元素設置overflow:auto
1、示例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Examples</title> <meta name="description" content=""> <meta name="keywords" content=""> <style type="text/css"> .div1{background:pink;border:1px solid gray;width:98%;overflow:auto} .div2{background:lightgreen;border:1px solid gray;height:100px;margin-top:10px;width:98%;} .left{float:left;width:30%;height:160px;background:#eee} .right{float:right;width:30%;height:120px;background:#eee} </style> </head> <body> <div class="div1"> <div class="left">Left</div> <div class="right">Right</div> </div> <div class="div2">div2</div> </body> </html>
2、優缺點：
優點：不存在結構和語義化問題，代碼量少
缺點：多個嵌套后，FF在某種情況下會造成內容全選;IE在mouseover造成寬度改變時會造成最外層模塊出現滾動條。
四、父元素設置display：table
1、display語法
display:table: 此元素會作為塊級表格來顯示（類似 <table>），表格前后帶有換行符。
2、示例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Examples</title> <meta name="description" content=""> <meta name="keywords" content=""> <style type="text/css"> .div1{background:pink;border:1px solid gray;width:98%;display:table;margin-bottom:10px;} .div2{background:lightgreen;border:1px solid gray;height:100px;margin-top:10px;width:98%;} .left{float:left;width:30%;height:160px;background:#eee} .right{float:right;width:30%;height:120px;background:#eee} </style> </head> <body> <div class="div1"> <div class="left">Left</div> <div class="right">Right</div> </div> <div class="div2">div2</div> </body> </html>
3、優缺點：
優點：結構化語義完全正確，代碼量少
缺點：和模型屬性已更改，不推薦使用。
五、父元素設置hieght
1、示例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Examples</title> <meta name="description" content=""> <meta name="keywords" content=""> <style type="text/css"> .div1{background:pink;border:1px solid gray;height:200px;} .div2{background:lightgreen;border:1px solid gray;height:100px;margin-top:10px;} .left{float:left;width:30%;height:160px;background:#eee} .right{float:right;width:30%;height:120px;background:#eee} </style> </head> <body> <div class="div1"> <div class="left">Left</div> <div class="right">Right</div> </div> <div class="div2">div2</div> </body> </html>
2、優缺點：
優點：簡單易懂，代碼量少
缺點：只適合高度固定的布局，要給出精確的高度，不利於維護
六、父元素一起浮動
1、示例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Examples</title> <meta name="description" content=""> <meta name="keywords" content=""> <style type="text/css"> .div1{background:pink;border:1px solid gray;width:98%;margin-bottom:10px;float:left;} .div2{background:lightgreen;border:1px solid gray;height:100px;margin-top:10px;width:98%;clear:both} .left{float:left;width:30%;height:160px;background:#eee} .right{float:right;width:30%;height:120px;background:#eee} </style> </head> <body> <div class="div1"> <div class="left">Left</div> <div class="right">Right</div> </div> <div class="div2">div2</div> </body> </html>
2、優缺點：
優點：不存在結構和語義化問題，代碼量少
缺點：與父元素相鄰的元素布局會受到影響，不可能一直浮動到body層吧，不推薦使用。
七、使用::after偽元素
1、示例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Examples</title> <meta name="description" content=""> <meta name="keywords" content=""> <style type="text/css"> .div1{background:pink;border:1px solid gray;} .div2{background:lightgreen;border:1px solid gray;height:100px;margin-top:10px;} .left{float:left;width:30%;height:160px;background:#eee} .right{float:right;width:30%;height:120px;background:#eee} .div1::after{display:block;clear:both;content:"";visibility:hidden;height:0} .div1{zoom:1} </style> </head> <body> <div class="div1"> <div class="left">Left</div> <div class="right">Right</div> </div> <div class="div2">div2</div> </body> </html>
2、優缺點：
優點：結構化語義完全正確。
缺點：復用方式不當會造成代碼量增加。且IE8之前版本不支持::after，需要使用zoom:1觸發haslayout.