爲何要清除浮動以及清除浮動的方法

1.爲何要清除浮動

浮動元素會脫離文檔流，致使父元素塌陷；舉個例子：一個橡皮筋綁了10根筷子，此時橡皮筋就被撐開；當把筷子從橡皮筋中拿出來時，橡皮筋就變回原樣。這樣當話，父元素中若是有背景圖片或是其餘樣式，就會受到影響。

2.清除浮動的方法

a.給父元素設置固定的高度

b.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;
}
複製代碼

c.僞元素清除浮動

其實和第二種方法同樣，只是第二種方法會添加一個冗餘元素；使用：after在浮動元素的父容器後添加一個看不見的塊級元素，設置爲clear：both；

<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;//容許瀏覽器渲染它，可是不顯示出來
  }
複製代碼

d.br標籤清除浮動

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.com/ljianshu/Bl… 浪裏行舟大佬