如何清除浮動

時間 2019-11-15

標籤如何清除浮動简体版

原文原文鏈接

本文概述

本文的框架圖以下：php

1、浮動究竟是什麼？

W3school中給出的浮動定義爲浮動的框能夠向左或向右移動，直到它的外邊緣碰到包含框或另外一個浮動框的邊框爲止。因爲浮動框脫離文檔的普通流中，因此文檔的普通流中的塊框表現得就像浮動框不存在同樣。 css

2、浮動有什麼特色？

浮動的特色，能夠用八個字總結：脫標、貼邊、字圍和收縮。html

爲了更好說明，請看下圖：當框 1 向左浮動時，它脫離文檔流（脫標）而且向左移動（貼邊），直到它的左邊緣碰到包含框的左邊緣。由於它再也不處於文檔流中，因此它不佔據空間，實際上覆蓋住了框 2，使框 2 從視圖中消失。若是框2中有文字，就會圍着框1排開（字圍）。git

若是把全部三個框都向左浮動，那麼框 1 向左浮動直到碰到包含框，另外兩個框向左浮動直到碰到前一個浮動框。 github

下面着重講解下第四個特色--收縮

一個浮動的內聯元素（好比span img標籤）不須要設置display：block就能夠設置寬度。segmentfault

<style>
        div{
            float: left;
            background-color: greenyellow;
        }
    </style>
</head>
<body>
<div>
    這是一段文字
</div>
</body>
複製代碼

獲得如下的效果：瀏覽器

咱們都知道div標籤是塊級元素，會獨佔一行，然而上面的例子中將div設置爲左浮後，其寬度再也不是佔滿一行，而是收緊爲內部元素的寬度，這就是浮動第四個特徵的含義。

3、浮動有什麼缺點？

先看下面這段代碼：bash

<style>
      .parent{
          border: solid 5px;
          width:300px;
      }
      .child:nth-child(1){
          height: 100px;
          width: 100px;
          background-color: yellow;
          float: left;
      }
      .child:nth-child(2){
          height: 100px;
          width: 100px;
          background-color: red;
          float: left;
      }
      .child:nth-child(3){
          height: 100px;
          width: 100px;
          background-color: greenyellow;
          float: left;
      }
    </style>
</head>
<body>
<div class="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>
</body>
複製代碼

咱們想讓父容器包裹着三個浮動元素，然而事與願違，獲得倒是這樣的結果：框架

這就是浮動帶來反作用----父容器高度塌陷，因而清理浮動就顯着相當重要。

4、如何清理浮動？

清除浮動不是不用浮動，清除浮動產生的父容器高度塌陷。ui

套路1：給浮動元素的父元素添加高度（擴展性很差）

若是一個元素要浮動，那麼它的父元素必定要有高度。高度的盒子，才能關住浮動。能夠經過直接給父元素設置height，實際應用中咱們不大可能給全部的盒子加高度，不只麻煩，而且不能適應頁面的快速變化；另一種，父容器的高度能夠經過內容撐開（好比img圖片），實際當中此方法用的比較多。

套路2：clear:both;

在最後一個子元素新添加最後一個冗餘元素，而後將其設置clear:both,這樣就能夠清除浮動。這裏強調一點，即在父級元素末尾添加的元素必須是一個塊級元素，不然沒法撐起父級元素高度。

<div id="wrap">
	    <div id="inner"></div>
	    <div style="clear: both;"></div>
	</div>
複製代碼

#wrap{
	      border: 1px solid;
	}
	#inner{
	      float: left;
	      width: 200px;
	      height: 200px;
	      background: pink;
	}
複製代碼

套路3：僞元素清除浮動

上面那種辦法當然能夠清除浮動，可是咱們不想在頁面中添加這些沒有意義的冗餘元素，此時如何清除浮動嗎？ 結合 :after 僞元素和 IEhack ，能夠完美兼容當前主流的各大瀏覽器，這裏的 IEhack 指的是觸發 hasLayout。

<div id="wrap" class="clearfix">
    <div id="inner"></div>
</div>
複製代碼

#wrap {
        border: 1px solid;
      }
      #inner {
        float: left;
        width: 200px;
        height: 200px;
        background: pink;
      }
      /*開啓haslayout*/
      .clearfix {
        *zoom: 1;
      }
      /*ie6 7 不支持僞元素*/
      .clearfix:after {
        content: '';
        display: block;
        clear: both;
        height:0;
        line-height:0;
        visibility:hidden;//容許瀏覽器渲染它，可是不顯示出來
      }
複製代碼

給浮動元素的父容器添加一個clearfix的class，而後給這個class添加一個:after僞元素，實現元素末尾添加一個看不見的塊元素來清理浮動。這是通用的清理浮動方案，推薦使用

套路4：給父元素使用overflow:hidden;

這種方案讓父容器造成了BFC（塊級格式上下文），而BFC能夠包含浮動，一般用來解決浮動父元素高度坍塌的問題。

BFC的觸發方式

咱們能夠給父元素添加如下屬性來觸發BFC：

float 爲 left | right
overflow 爲 hidden | auto | scorll
display 爲 table-cell | table-caption | inline-block
position 爲 absolute | fixed

這裏能夠給父元素設置overflow:auto，可是爲了兼容IE最好使用overflow:hidden。

但這種辦法有個缺陷：若是有內容出了盒子，用這種方法就會把多的部分裁切掉，因此這時候不能使用。

BFC的主要特徵:

BFC容器是一個隔離的容器，和其餘元素互不干擾；因此咱們能夠用觸發兩個元素的BFC來解決垂直邊距摺疊問題。
BFC不會重疊浮動元素
BFC能夠包含浮動,這能夠清除浮動。

套路5：br標籤清浮動

br標籤存在一個屬性：clear。這個屬性就是可以清除浮動的利器，在br標籤中設置屬性clear，並賦值all。即能清除掉浮動。

<div id="wrap">
      <div id="inner"></div>
      <br clear="all" />
    </div>
複製代碼

#wrap {
        border: 1px solid;
      }
      #inner {
        float: left;
        width: 200px;
        height: 200px;
        background: pink;
      }
複製代碼

若是以爲文章對你有些許幫助，歡迎在個人GitHub博客點贊和關注，感激涕零！