css浮動的"巨坑"與完美解決辦法

浮動

1 浮動概念

• 若是想實現網頁中排版佈局，好比一行內顯示對應的標籤元素，可使用浮動屬性。浮動能夠實現元素並排。

• 塊轉行內日塊也能夠實現一行顯示,不過存在空白摺疊現象

• float 浮動

  屬性值	描述
  none	表示不浮動，全部以前講解的HTML標籤默認不浮動
  left	左浮動
  right	右浮動
  inherit	繼承父元素的浮動屬性

  #當一個元素浮動以後，它會被移出正常的文檔流，而後向左或者向右平移，一直平移直到碰到了所處的容器的邊框，或者碰到另一個浮動的元素

• 浮動的現象

  咱們以前說浮動的設計初衷是爲了作」文字環繞效果「。那麼咱們就來看一下若是對盒子設置了浮動，會產生什麼現象？

  • 浮動的元素脫離了標準文檔流，即脫標
  • 浮動的元素互相貼靠
  • 浮動的元素會產生」字圍「效果
  • 浮動元素有收縮效果

• 標準文檔流

  文檔流指的是元素排版佈局過程當中，元素會默認自動從左日後，從上往下的流式排列方式。

  即不對頁面進行任何佈局控制時，瀏覽器默認的HTML佈局方式，這種佈局方式從左往右，從上往下，有點像流水的效果，咱們稱爲流式佈局。

2. 浮動帶來的問題

• 浮動的元素脫離了標準文檔流，即脫標
• 浮動的元素互相貼靠
• 浮動的元素會產生」字圍「效果
• 浮動元素有收縮效果
  • 當浮動元素沒有設置尺寸,會適應浮動元素內的子元素尺寸
• 浮動的元素不佔尺寸,標準流元素能夠撐起父級塊的尺寸,浮動元素不能夠
• 浮動元素設置margin_top不會發生塌陷現象
  • 給標準流元素設置margin-top時會發生margin塌陷

3 .清除浮動問題的方式

• 給浮動元素添加父級塊,並設置父級塊高度;

  • 不宜維護,不靈活
  • 應用:萬年不變導航欄,固定欄;

• 內牆法: 給最後一個浮動元素的後面添加一個空的塊級標籤,而且設置標籤的屬性爲 clear:both;

  • 冗雜,浪費資源(不推薦)

• 僞元素清楚法(推薦)

  • 在盒子上末尾加一個佔位空的塊級標籤;

  .pa::after{
      content:''
      display: block;
      clear: both;
  }

• overflow: hidden;清楚法 (經常使用)

  # overflow: hidden(超出隱藏) vidible(默認-可見) scroll(滾動顯示)
      在父級盒子上設置一個overflow: hidden;
          #注意:hidden(超出隱藏)!!

4. BFC(只摘出一小部分以供參考)

• BFC生成規則

  1.內部的Box會在垂直方向，一個接一個地放置。
  2.Box垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰Box的margin會發生重疊
  3.每一個元素的margin box的左邊， 與包含塊border box的左邊相接觸(對於從左往右的格式化，不然相反)。即便存在浮動也是如此。
  4.BFC的區域不會與float 元素重疊。
  5.BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素。反之也如此。
  6.計算BFC的高度時，浮動元素也參與計算

• 哪些元素會生成BFC

  1.根元素
  2.float屬性不爲none
  3.position爲absolute或fixed
  4.display爲inline-block
  5.overflow不爲visible