以下從浮動到BFC的段落 摘自MDN 網路開發者

float 浮動

float CSS屬性指定一個元素應沿其容器的左側或右側放置，允許文本和內聯元素環繞它。該元素從網頁的正常流動中移除，儘管仍然保持部分的流動性（與絕對定位相反）。

一個浮動元素是float的值不為none的元素。

/* Keyword values */
float: left;
float: right;
float: none;
float: inline-start;
float: inline-end;

/* Global values */
float: inherit;
float: initial;
float: unset;

由於float意味著使用塊佈局，它在某些情況下修改display 值的計算值：

備註：如果要在 JavaScript 中把float屬性當作element.style對象的一個成員來操作，那麼在Firefox 34 和更老的版本中，你必須拼寫成cssFloat。另外還要註意到在 Internet Explorer 8 和更老的IE當中，要使用styleFloat屬性。這是DOM駝峰命名和CSS所用的連字元分隔命名法對應關係中的一個特例（這是因為在 JavaScript 中"float"是一個保留字，因為同樣的原因，"class"被改成了"className" 、"for"被改成了"htmlFor"）。

語法

float 屬性的值被指定為單一的關鍵字，值從下麵的值列表中選擇。

值

left

表明元素必須浮動在其所在的塊容器左側的關鍵字。

right

表明元素必須浮動在其所在的塊容器右側的關鍵字。

none

表明元素不進行浮動的關鍵字。

inline-start

關鍵字，表明元素必須浮動在其所在塊容器的開始一側，在ltr腳本中是左側，在rtl腳本中是右側。

inline-end

關鍵字，表明元素必須浮動在其所在塊容器的結束一側，在ltr腳本中是右側，在rtl腳本中是左側。

形式化語法

left | right | none | inline-start | inline-end

例子

<style type="text/css">
  div { border: solid red;  max-width: 70ex; }
  h4  { float: left;  margin: 0; }
</style>

<div>
  <h4>HELLO!</h4>
  This is some text. This is some text. This is some text.
  This is some text. This is some text. This is some text.
  This is some text. This is some text. This is some text.
  This is some text. This is some text. This is some text.
</div>

浮動元素是如何定位的

正如我們前面提到的那樣，當一個元素浮動之後，它會被移出正常的文檔流，然後向左或者向右平移，一直平移直到碰到了所處的容器的邊框，或者碰到另外一個浮動的元素。

在下麵的圖片中，有三個紅色的正方形。其中有兩個向左浮動，一個向右浮動。要註意到第二個向左浮動的正方形被放在第一個向左浮動的正方形的右邊。如果還有更多的正方形這樣浮動，它們會繼續向右堆放，直到填滿容器一整行，之後換行至下一行。

清除浮動

在前面的例子當中，浮動的元素的高度比它們所在的容器元素（是塊元素）的高度小。然而如果塊元素內的文本太短，不足以把塊元素的大小撐到高度大於所有浮動元素的高度，我們可能會看到意想不到的效果。例如，如果上面圖片中的文字只有"Lorem ipsum dolor sit amet,"，並且接下來是另外一個和"Floats Example"這個標題一樣風格的標題元素，那麼第二個標題元素會出現在紅色的正方形之間。然而在大多數這種情況下，我們希望這個標題元素是靠左對齊的。為了實現這個效果，我們需要清除浮動。

這個例子中，最簡單的清除浮動方式就是給我們想要確保左對齊的新標題元素添加clear屬性：

h2.secondHeading { clear: both; }

然而這個方法只是在同一塊級格式化上下文（block formatting context）中沒有其他元素的時候才是有效的。如果我們的 H2 有兄弟元素是向左浮動和向右浮動的邊欄，那麼使用clear 會導致這個標題元素出現在邊欄的下方，這顯然不是我們期望的結果。

如果不能使用清除浮動，另一種做法是浮動容器的限制塊級格式化上下文。再次列舉上面的例子，有三個紅色的正方形和一個P元素。我們可以設置P元素的overflow屬性值變成hidden或者auto，因為這樣可以讓容器元素伸展到能夠包含紅色正方形，而不是讓他們超出塊元素的底部。

p.withRedBoxes { overflow: hidden; height: auto; }

Note: 設置overflow為scroll 也可以讓塊元素撐大來包含所有的浮動子元素，但是這樣不論內容有多少都會顯示出一個滾動條。即使 height 預設值為 auto，我們還是設置了，是為了表明容器應該增大高度以便包裹住裡面的內容。

clear 清除浮動

clear CSS 屬性指定一個元素是否可以在它之前的浮動元素旁邊，或者必須向下移動(清除浮動) 在它的下麵。clear 屬性適用於浮動和非浮動元素。

clear: none;
clear: left;
clear: right;
clear: both;
clear: inline-start;
clear: inline-end;

clear: inherit;

當應用於非浮動塊時，它將非浮動塊的邊框邊界移動到所有相關浮動元素外邊界的下方。這個行為作用時會導致margin collapsing不起作用。

當應用於浮動元素時，它將元素的外邊界移動到所有相關的浮動元素外邊界的下方。這會影響後面浮動元素的佈局，後面的浮動元素的位置無法高於它之前的元素。

要被清除的相關浮動元素指 在相同塊級格式化上下文中的前置浮動。

註釋:如果你想要一個元素將所有浮動元素包含在內，你既可以將這個容器設置為浮動，又可以通過 ::after 偽元素設置clear屬性作為替代。

/* best practical*/
/* old */
.clearfix:before, .clearfix:after{
    overflow: hidden;
    display: table;
    visibility: hidden;
    content: '';
    clear: both;
}

/* new */
.clearfix::before, .clearfix::after{
    overflow: hidden;
    display: table;
    visibility: hidden;
    content: '';
    clear: both;
}

/* new clearfix */
.clearfix::after {
    content: "";
    display: table;
    clear: both;
    overflow: hidden;
    visibility: hidden;
}

/* old clearfix */
.clearfix:after {
    content: "";
    display: block;
    clear: both;
}

語法

clear: none
clear: left
clear: right
clear: both

clear: inherit

值

none

元素不會向下移動清除之前的浮動。

left

元素被向下移動用於清除之前的左浮動。

right

元素被向下移動用於清除之前的右浮動。

both

元素被向下移動用於清除之前的左右浮動。

inline-start

inline-start是一個關鍵字，表示該元素向下移動以清除其包含塊的起始側上的浮動。即在某個區域的左側浮動或右側浮動。

inline-end

inline-end是一個關鍵字，表示該元素向下移動以清除其包含塊的末端的浮點，`即在某個區域的右側浮動或左側浮動。

示例

註意: 給div添加'wrapper'類，使其添加一個邊框，以便更好觀察到實體的此屬性被清除。

HTML Content

<div class="wrapper">

    <p class="black">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
      Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.</p>

    <p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>

    <p class="left">This paragraph clears left.</p>

</div>

CSS Content

.wrapper{
    border:1px solid black;
    padding:10px;
}
.left {
    border: 1px solid black;
    clear: left;
}
.black {
    float: left;
    margin: 0;
    background-color: black;
    color: #fff;
    width: 20%;
}
.red {
    float: left;
    margin: 0;
    background-color: red;
    width:20%;
}
p {
    width: 50%;
}

如果上例中，樣式中的float: left 都改為了float：right的話，則相應clear： right。
而如果左浮動和右浮動都有的樣式，則clear: both。（both：兩者）

BFC 塊格式上下文

塊格式化上下文（Block Formatting Context，BFC） 是Web頁面的可視化CSS渲染的一部分，是佈局過程中生成塊級盒子的區域，也是浮動元素與其他元素的交互限定區域。

下列方式會創建塊格式化上下文：

• 根元素或包含根元素的元素。

• 浮動元素（元素的 float值不是 none）。

• 絕對定位元素（元素的 position（position屬性用於指定一個元素在文檔中的定位方式。top，right，bottom 和 left 屬性則決定了該元素的最終位置。) 為 absolute （絕對定位）或 fixed（固定定位）。

• 行內塊元素（元素的 display 為 inline-block。

• 表格單元格（元素的 display為 table-cell，HTML表格單元格預設為該值）

• 表格標題（元素的 display為 table-caption，HTML表格標題預設為該值）

• 匿名錶格單元格元素（元素的 display為 table、``table-row、 table-row-group、``table-header-group、``table-footer-group（分別是HTML table、row、tbody、thead、tfoot的預設屬性）或 inline-table）

• overflow值不為 visible 的塊元素。

• display值為 flow-root 的元素。

• contain 值為 layout、content或 strict 的元素。

• 彈性元素（display為 flex 或 inline-flex元素的直接子元素）

• 網格元素（display為 grid 或 inline-grid 元素的直接子元素）

• 多列容器（元素的 column-count或 column-width 不為 auto，包括 ``column-count 為 1）

• column-span 為 all 的元素始終會創建一個新的BFC，即使該元素沒有包裹在一個多列容器中( 標準變更，Chrome bug）。

創建了塊格式化上下文的元素中的所有內容都會被包含到該BFC中。

塊格式化上下文對浮動定位與清除浮動都很重要。浮動定位和清除浮動時只會應用於同一個BFC內的元素。浮動不會影響其它BFC中元素的佈局，而清除浮動只能清除同一BFC中在它前面的元素的浮動。外邊距摺疊（Margin collapsing）也只會發生在屬於同一BFC的塊級元素之間。

以下開始，就不是摘自MDN，而是換成摘自博客園小馬哥&的相關博文，再加以整理和添加自己的一點思路而成。

行內元素和塊級元素

• 標簽分為行內元素與塊級元素
• 兩者區別和特點：
  • 行內元素能與其它行內元素併排共處一行，而塊級元素獨占一行；
  • 行內元素設置width無效，height無效（可以設置line-height)，margin和padding在上下方向的設置無效；
  • 行內元素適合顯示具體內容，而塊級元素適合做佈局；
  • 行內元素一般是內容的容器，而塊級元素一般是其他容器的容器；
• 行內元素轉化為塊級元素，使用display：block
• 塊級元素轉化為行內元素，使用display：inline

標準文檔流和脫離標準流

web網頁的製作，就像是一個“流”，從上而下，像“織毛衣”。
標準文檔流下的微觀現象：

• 空白摺疊現象
  • 多個空格會被合併成一個空格顯示到瀏覽器頁面中。
• 高矮不齊，底邊對齊
  • 文字還有圖片大小不一，都會讓我們頁面的元素出現高矮不齊的現象，但是在瀏覽器查看我們的頁面總會發現底邊對齊。
• 自動換行，一行寫不滿，換行寫
  • 如果在一行內寫文字，文字過多，那麼瀏覽器會自動換行去顯示我們的文字。

標準流裡面的限制非常多，導致很多頁面效果無法實現。如果我們現在就要併排、並且就要設置寬高，那該怎麼辦呢？辦法是：移民！脫離標準流！

css中一共有三種手段，使一個元素脫離標準文檔流：

• （1）浮動
• （2）絕對定位
• （3）固定定位

總結

浮動四大特性

• 浮動的元素脫標
  • 脫離標準流，漂浮，遮蓋標準流下的元素
• 浮動的元素互相貼靠
  • 沒有足夠空間互相貼靠時，往邊靠
• 浮動的元素有“字圍”（文字圍繞）效果
  • 所謂字圍效果，當div浮動，p不浮動，div遮蓋住了p，div的層級提高，但是p中的文字不會被遮蓋，此時就形成了字圍效果。
• 浮動元素緊湊效果（收縮）
  • 一個浮動元素。如果沒有設置width，那麼就自動收縮為文字的寬度（這點跟行內元素很像）

佈局浮動的原則

按佈局來說，一般都不會是一個盒子單獨浮動起來，往往是橫向區域的盒子一起浮動。且為了不影響接下來的文檔標準流，往往也要收尾做出清除浮動。

為什麼要清除浮動？

在頁面佈局的時候，每個結構中的父元素的高度，我們一般不會設置。（為什麼？）

試想想，如果我第一版的頁面的寫完了，感覺非常爽，突然隔了一個月，產品經理說頁面某一塊的區域，需要加點內容，或者覺得圖片要縮小一下。這樣的需求在工作中非常常見的。真想打他啊。那麼此時作為一個前端小白，肯定是去每個地方加內容，改圖片，然後修改父盒子的高度。那問題來了，這樣不影響開發效率嗎？答案是肯定的。

所以父盒子我們一般不設置高度，而由子元素的內容去撐起父盒子的高度。那麼當這個子元素是浮動的時候，父盒子沒有高度，浮動子元素是不會填充父盒子的高度的，這個時候就會有下一欄的盒子跑過來到浮動子元素的下麵被覆蓋摭擋了，非常影響頁面佈局。

浮動元素確實能實現我們頁面元素併排的效果，這是它的好處，但同時它還帶來了頁面佈局極大的錯亂！！！所以我們要在浮動完之後再做一步清除浮動的操作（並不影響浮動子元素之前的佈局，只是為了下排的佈局不亂。）

清除浮動的方法

• 給父盒子設置高度（不推薦，除非萬年不變的導航欄之類）
• clear:both（左右浮動均可清除）
  • 給浮動元素的後面加一個空的div，並且該元素不浮動，然後設置clear：both
  • 又被稱為內牆法，無緣無故添加了div元素，結構冗餘
• 偽元素清除法（常用）

  • 給浮動子元素的父盒子，也就是不浮動的元素，添加一個clearfix的類，然後設置。

    .clearfix:after{
    /*要寫這三句話去實現*/ 
    content: '.'; 
    clear: both; 
    display: block;
    }

• overflow：hidden（常用加推薦）
  • overflow：auto也可以清除浮動，但auto會出現滾動條，所以還是使用不影響佈局的hidden，推薦使用這種方法，原理大致是藉助了BFC（塊格式上下文）實現的。

逐漸演變成overflow：hidden清除法。其實它是一個BFC區域。

BFC常見作用

• 包含浮動元素，解決高度塌陷和清除浮動；
• 不被浮動元素覆蓋（比如文字圍繞效果）；
• 阻止外邊距摺疊（margin塌陷）
  • 在標準文檔流中，塊級標簽之間豎直方向的margin會以大的為準，這就是margin的塌陷現象。可以用overflow：hidden產生bfc來解決。

end
2018-06-01