float 特性 包裹性； 塊狀化並格式化上下文； 破壞文檔流，使父元素高度塌陷，在父元素中浮動元素高度不計在內； 沒有任何 margin 合併 使浮動元素後的非浮動元素的文本環繞著浮動元素 浮動之間的排列 元素設為浮動後會變為包裹性，若沒有明確寬度，寬度則是元素里的內容寬度。浮動元素會生成一個塊級 ...
float
特性
- 包裹性；
- 塊狀化並格式化上下文；
- 破壞文檔流，使父元素高度塌陷，在父元素中浮動元素高度不計在內；
- 沒有任何 margin 合併
- 使浮動元素後的非浮動元素的文本環繞著浮動元素
浮動之間的排列
元素設為浮動後會變為包裹性，若沒有明確寬度，寬度則是元素里的內容寬度。浮動元素會生成一個塊級框，這裡的塊級框是不換行的（其實也就是向左對齊的inline-block）
需要註意一點，在設置子容器寬度為50%，如果設置了具體的邊框或者內外邊距，兩個子容器是無法併排的，因為剩餘寬度無法容納第二個子容器的寬度。
接下來我們來看一下子容器高度不一致時float為left的情況。
浮動與非浮動的排列
非浮動會無視浮動元素的位置直接占位，只有其中的文本會受到影響（進行環繞）。
關於clear的局限
為了使浮動元素之後的元素正常排列，我們的常規方法大都是使用clear，clear:both的作用本質是讓自己不和 float元素在一行顯示，並不是真正意義上的清除浮動（在使用clear後，如果使用margin上移至浮動元素同行範圍內，依舊會發生文字環繞），並且高度崩塌依舊存在。
由此可見，clear:both只能在一定程度上消除浮動的影響，要想完美地去除浮動元素的影響，應該利用BFC。
BFC：
特性
- 塊級格式化上下文會阻止外邊距疊加
當兩個相鄰的塊框在同一個塊級格式化上下文中時，它們之間垂直方向的外邊距會發生疊加。換句話說，如果這兩個相鄰的塊框不屬於同一個塊級格式化上下文，那麼它們的外邊距就不會疊加。 - 塊級格式化上下文不會重疊浮動元素
根據規定，一個塊級格式化上下文的邊框不能和它裡面的元素的外邊距重疊。這就意味著瀏覽器將會給塊級格式化上下文創建隱式的外邊距來阻止它和浮動元素的外邊距疊加。由於這個原因，當給一個挨著浮動的塊級格式化上下文添加負的外邊距時將會不起作用。 - 塊級格式化上下文通常可以包含浮動
通俗地來說：創建了BFC的元素就是一個獨立的盒子，裡面的子元素不會在佈局上影響外面的元素，反之亦然，同時BFC任然屬於文檔中的普通流。
觸發條件：
- <html>根元素
float 除了none以外的值
overflow 除了visible 以外的值（hidden，auto，scroll ）
display (table-cell，table-caption，inline-block)
position（absolute，fixed）
fieldset元素（實驗中，不建議使用）
建議採取的BFC特性
.lbf-content {
overflow: hidden;
}.lbf-content {
display: table-cell;
width: 9999px;
}第二種會讓連續英文字元換行，解決方法：
.word-break {
display: table;
width: 100%;
table-layout: fixed;
word-break: break-all;
}
