摘要：為了實現(xiàn)這個效果，我們需要清除浮動。元素被向下移動用于清除之前的左右浮動。塊格式化上下文對浮動定位與清除浮動都很重要。浮動定位和清除浮動時只會應用于同一個內(nèi)的元素。且為了不影響接下來的文檔標準流，往往也要收尾做出清除浮動。

以下從浮動到BFC的段落 摘自MDN 網(wǎng)絡開發(fā)者

float 浮動

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

一個浮動元素是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

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

right

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

none

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

inline-start

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

inline-end

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

形式化語法

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

例子

HELLO!
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.

浮動元素是如何定位的

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

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

清除浮動

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

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

h2.secondHeading { clear: both; }

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

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

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

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

clear 清除浮動

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

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

clear: inherit;

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

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

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

注釋:如果你想要一個元素將所有浮動元素包含在內(nèi)，你既可以將這個容器設置為浮動，又可以通過 ::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是一個關鍵字，表示該元素向下移動以清除其包含塊的起始側(cè)上的浮動。即在某個區(qū)域的左側(cè)浮動或右側(cè)浮動。

inline-end

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

示例

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

HTML Content

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
      Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
This paragraph clears left.

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渲染的一部分，是布局過程中生成塊級盒子的區(qū)域，也是浮動元素與其他元素的交互限定區(qū)域。

下列方式會創(chuàng)建塊格式化上下文：

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

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

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

• 行內(nèi)塊元素（元素的 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元素的直接子元素）

• 網(wǎng)格元素（display為 grid 或 inline-grid 元素的直接子元素）

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

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

創(chuàng)建了塊格式化上下文的元素中的所有內(nèi)容都會被包含到該BFC中。

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

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

行內(nèi)元素和塊級元素

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

標準文檔流和脫離標準流

web網(wǎng)頁的制作，就像是一個“流”，從上而下，像“織毛衣”。
標準文檔流下的微觀現(xiàn)象：

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

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

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

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

總結

浮動四大特性

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

布局浮動的原則

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

為什么要清除浮動？

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

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

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

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

清除浮動的方法

• 給父盒子設置高度（不推薦，除非萬年不變的導航欄之類）
• clear:both（左右浮動均可清除）
  • 給浮動元素的后面加一個空的div，并且該元素不浮動，然后設置clear：both
  • 又被稱為內(nèi)墻法，無緣無故添加了div元素，結構冗余
• 偽元素清除法（常用）
  • 給浮動子元素的父盒子，也就是不浮動的元素，添加一個clearfix的類，然后設置。

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

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

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

BFC常見作用

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

end
2018-06-01