清除浮動的可用方式

wizChen 發(fā)布于2019-08-29 11:18 / 2740人閱讀

摘要：清除浮動的可用方式測試瀏覽器正常格式的代碼顯示如下圖片描述但是對和應(yīng)用后浮動的影響顯而易見使元素從正常的文檔流中刪除，但是依舊會占據(jù)空間。

清除浮動的可用方式 （測試瀏覽器：FF）

div0

div1

div2

this is a paragraph

顯示如下：
圖片描述

但是對class1和class2應(yīng)用float:left后：

浮動的影響顯而易見

float:left/right/none; 使元素從正常的文檔流中刪除，但是依舊會占據(jù)空間。如果設(shè)置float的元素沒有設(shè)置寬度并且無內(nèi)容時，會縮成一個圓點。不設(shè)置寬度時寬度會隨內(nèi)容的增加而增加。浮動會使當前標簽產(chǎn)生向上浮的效果，同時會影響到前后標簽、父級標簽的位置及 width height 屬性。而且同樣的代碼，在各種瀏覽器中顯示效果也有可能不相同。

清除浮動

對受到影響的元素（一般是緊隨其后的同級元素）添加樣式clear: both，缺點：一般是加上空標簽

，如果頁面浮動布局多，就要增加很多空div。

               div.class3{
                   clear:both;
                   }

父級元素設(shè)置寬度和overflow:hidden，不能設(shè)置height，瀏覽器會自己捕獲高度。
缺點：不能和position配合使用，因為超出的尺寸的會被隱藏。

父級div定義寬度和overflow:auto，不能設(shè)置height，瀏覽器會自己捕獲高度。

父級div定義height，直接解決了父級div無法自動獲取到高度的問題
缺點：只適合高度固定的布局，要給出精確的高度，如果高度和父級div不一樣時，會產(chǎn)生問題，因此不推薦使用，只建議高度固定的布局時使用

父級div定義偽類:after和zoom

   
   .clearfloat:after{
       display:block;
       clear:both;
       content:"";
       visibility:hidden;
       height:0}
  .clearfloat{zoom:1}

原理：IE8以上和非IE瀏覽器才支持:after，原理和方法1有點類似（在末尾設(shè)置不顯示的塊級元素，并加上clear:both），zoom(IE轉(zhuǎn)有屬性)可解決ie6,ie7浮動問題。
優(yōu)點：瀏覽器支持好，不容易出現(xiàn)怪問題（目前：大型網(wǎng)站都有使用，如：騰迅，網(wǎng)易，新浪等等）。定義公共類后可以減少CSS代碼。

總結(jié)

清除浮動的方法中，第五種父級div定義偽類具有較好的瀏覽器兼容性，在大型網(wǎng)站中多有應(yīng)用，但是代碼復雜，要加深理解。