^{<dl id="mh083"></dl>}

CSS清除浮動的常用方法優缺點分析

2024-07-11 08:25:38

字體：大中小

來源：轉載

供稿：網友

一、拋一塊問題磚（display： block）先看現象：

分析HTML代碼結構：

XML/HTML Code復制內容到剪貼板

分析CSS代碼樣式：

CSS Code復制內容到剪貼板

.outer{border: 1px solid #ccc;background: #fc9;color: #fff; margin: 50px auto;padding: 50px;} .div1{width: 80px;height: 80px;background: red;float: left;}
.div2{width: 80px;height: 80px;background: blue;float: left;} .div3{width: 80px;height: 80px;background: sienna;float: left;}

這里沒有給最外層的DIV.outer 設置高度，但是我們知道如果它里面的元素不浮動的話，那么這個外層的高是會自動被撐開的。但是當內層元素浮動后，就出現了一下影響：

（1）：背景不能顯示（2）：邊框不能撐開（3）：margin 設置值不能正確顯示
當一個內層元素是浮動的時候，如果沒有關閉浮動時，其父元素也就不會再包含這個浮動的內層元素，因為此時浮動元素已經脫離了文檔流。也就是為什么外層不能被撐開了！

解決辦法如下（使用其他代碼示例）：

1、父級div定義偽類:after和zoom

CSS Code復制內容到剪貼板

<style type="text/css"> .div1{background:#000080;border:1px solid red;}
.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}
.left{float:left;width:20%;height:200px;background:#DDD} .rightright{float:rightright;width:30%;height:80px;background:#DDD}
/*清除浮動代碼*/
.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0} .clearfloat{zoom:1}