徹底理解浮動float CSS浮動詳解清除浮動的方法

2024-04-27 14:33:24

字體：大中小

來源：轉載

供稿：網友

我們把網頁的常用的布局格式分為以下三種：

1.標準流。

所謂的標準流就是，行內元素自己單獨一行，而塊級元素是上下顯示的。以前我們學習的都是標準流。注意：標準流使我們網頁布局中最穩定的一種結構

2.浮動流

使我們學習的脫離標準流的第一種方式。會影響我們標準流的排列。所以，我們布局的時候，能用標準流做的，就不用浮動做。

3.定位流

定位流也是脫離標準流的一種模式。它完全脫離標準流，不會對標準流有影響。

浮動(float)

我們要浮動的目的： 我們浮動的目的，就是可以把多個塊級元素放到想要的一行上。浮動 Float：leftrightnone你不得不必須知道詳細的理解浮動：1.浮動已經脫離的標準流。（脫標）也就是說，浮動已經漂浮在標準流的上方。2.因為我們的浮動是左右浮動，所以我們的塊級元素都是左右排列。

清除浮動（clear）

如果想要我們做的網頁瀏覽器兼容性好，首先要保證的是，我們寫的代碼要足夠標準。清除浮動的原因：因為浮動會影響標準流。所以我要根據不同情況來清除浮動。Clear:both;

1.1.1額外標簽法

W3c推薦，再最后一個浮動的盒子的后面，新添加一個標簽。然后他可以清除浮動。小強零零壹 http://www.xiaoqiang001.com 優點：通俗好理解缺點：增加了太多的標簽

1.1.2Overflow清除浮動

使用方法：是浮動的大盒子（父級標簽）再樣式里面加:overflow:hidden;為了照顧ie6，我們再加上zoom:1; 小強零零壹 http://www.xiaoqiang001.com 優點：代碼書寫方便缺點：如果這個父盒子，里面還有定位，就會引起麻煩。

1.1.3After偽類清除浮動

聲明清除浮動：

.clearfix:after{content:"";display:block;visibility:hidden;clear:both;height:0;}.clearfix{/*為了照顧ie6瀏覽器*/zoom:1;}

調用

<divclass="boxclearfix">

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>overflow清除浮動</title><styletype="text/css">.clearfix:after{content:"";display:block;visibility:hidden;clear:both;height:0;}.clearfix{/*為了照顧ie6瀏覽器*/zoom:1;}.box{width:400px;}.one,.two{width:200px;height:100px;background-color:#093;float:left;}.two{background-color:#39F;}.test{width:400px;height:120px;background-color:#900;}</style></head><body><divclass="boxclearfix"><divclass="one"></div><divclass="two"></div></div><divclass="test"></div></body></html>

優點：一次寫完，后面直接調用就可以了缺點：聲明麻煩寫