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