CSS浮動? 如何清除浮動?

什么是浮動

浮動的框可以向左或向右移動,直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。

由于浮動框不在文檔的普通流中,所以文檔的普通流中的塊框表現得就像浮動框不存在一樣。

我們來看幾個例子

  • 請看下圖:當把框 1 向右浮動時,它脫離文檔流并且向右移動,直到它的右邊緣碰到包含框的右邊緣


  • 請看下圖: 當框 1 向左浮動時,它脫離文檔流并且向左移動,直到它的左邊緣碰到包含框的左邊緣。因為它不再處于文檔流中,所以它不占據空間,實際上覆蓋住了框 2,使框 2 從視圖中消失。如果把所有三個框都向左移動,那么框 1 向左浮動直到碰到包含框,另外兩個框向左浮動直到碰到前一個浮動框。


  • 請看下圖:如果包含框太窄,無法容納水平排列的三個浮動元素,那么其它浮動塊向下移動,直到有足夠的空間。如果浮動元素的高度不同,那么當它們向下移動時可能被其它浮動元素“卡住”


實現浮動

在 CSS 中,我們通過 float 屬性實現元素的浮動。float 屬性定義元素在哪個方向浮動。其可能值有:

  • left 元素向左浮動
  • right 元素向右浮動
  • none 默認值,元素不浮動
  • inherit 規定從父元素繼承float屬性的值。

清除浮動

我們先來了解一下CSS標準文檔流,說白了就是一個“默認”狀態。元素排版布局過程中,元素會自動從左往右,從上往下的流式排列。最終窗體自上而下分成一行行,并在每行中從左至右的順序排放元素。

但是我們在布局的時候,由于某些原因(當使用浮動、絕對定位、固定定位)會使文檔脫離標準流,其中浮動會影響標準流的排列。

我們浮動的目的,就是可以把多個塊級元素放到想要的一行上。

清除浮動的原因:因為浮動會影響標準流,比如浮動造成的父級高度塌陷問題

清除浮動的方法

1、使用偽元素來清除浮動(:after,注意:作用于浮動元素的父親)

  • 原理:IE8以上和非IE瀏覽器才支持:after,原理和方法2有點類似,zoom(IE專有屬性)可解決ie6,ie7浮動問題

  • 優點:瀏覽器支持好,不容易出現怪問題(目前:大型網站都有使用,如:騰迅,網易,新浪等等)

  • 缺點:代碼多,不少初學者不理解原理,要兩句代碼結合使用,才能讓主流瀏覽器都支持

  • 建議:推薦使用,建議定義公共類,以減少CSS代碼

.clearfix:after{
    content:"";  /*設置內容為空*/
    height:0;  /*高度為0*/
    line-height:0;  /*行高為0*/
    display:block;  /*將文本轉為塊級元素*/
    visibility:hidden;  /*將元素隱藏*/
    clear:both;  /*清除浮動*/
}
.clearfix{
    zoom:1;  /*為了兼容IE*/
}

2、添加新的元素對其應用 clear:both

  • 原理:添加一個空元素,利用css提供的clear:both清除浮動,讓父級div能自動獲取到高度

  • 優點:簡單,代碼少,瀏覽器支持好,不容易出現怪問題

  • 缺點:不少初學者不理解原理;如果頁面浮動布局多,就要增加很多空頁面標簽,造成結構的混亂。

  • 建議:不推薦使用,但此方法是以前主要使用的一種清除浮動方法

//對添加的元素使用 clear:both
.clear{clear:both;}
<div class="box">
    <div class="red" style="float:left;">1</div>
    <div class="sienna" style="float:left;">2</div>
    <div class="blue" style="float:left;">3</div>
    //添加一個新元素
    <div class="clear"></div>
</div>

3、父級div定義overflow:hidden

  • 原理:使用overflow:hidden時,瀏覽器會自動檢查浮動區域的高度
  • 優點:簡單,代碼少,瀏覽器支持好
  • 缺點:不能和position配合使用,因為超出的尺寸的會被隱藏
  • 建議:只推薦沒有使用position或對overflow:hidden理解比較深的朋友使用
.over-flow{ overflow:hidden; zoom: 1;}/*zoom1; 是在處理兼容性問題*/
<div class="box over-flow">
    <div class="red">1</div>
    <div class="sienna">2</div>
    <div class="blue">3</div>
</div>

4、父級div定義overflow:auto

  • 原理:使用overflow:auto時,瀏覽器會自動檢查浮動區域的高度
  • 優點:簡單,代碼少,瀏覽器支持好
  • 缺點:內部寬高超過父級div時,會出現滾動條。
  • 建議:不推薦使用,如果你需要出現滾動條或者確保你的代碼不會出現滾動條就使用吧。
.over-flow{ overflow:auto; zoom: 1;}/*zoom1; 是在處理兼容性問題*/
<div class="box over-flow">
    <div class="red">1</div>
    <div class="sienna">2</div>
    <div class="blue">3</div>
</div>

5、父級定義高度height
只適合高度固定的布局,要給出精確的高度,如果高度和父級div不一樣時,會產生問題不推薦使用,只建議高度固定的布局時使用。

6、父級display設置成table
原理是將div屬性變成表格,可能會產生新的未知問題,不推薦使用,只作了解。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,792評論 1 92
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML標準。 注意:講述HT...
    kismetajun閱讀 27,628評論 1 45
  • 浮動 CSS允許浮動任何元素。 浮動元素 首先,會以某種方式將浮動元素從文檔的正常流中刪除,不過它還是會影響布局。...
    exialym閱讀 1,240評論 0 6
  • 布面油畫:1975 藝術如同一條河流 每一朵浪花的翻涌都倒映著另一段歷程的波濤。下筆的每一瞬間都流動著藝...
    乄海燕閱讀 965評論 0 1
  • 每一個人在這世上都是一個特殊的存在 沒有人能夠預知自己的未來 更無法知曉他人的未來 既然我們無法預計未來將會發生什...
    終韶華傾負閱讀 329評論 8 2