bfc(block formatting context)，塊級格式化上下文，是乙個獨立的渲染區域，讓處於 bfc 內部的元素與外部的元素相互隔離，使內外元素的定位不會相互影響。
在ie下, layout,可通過zoom:1觸發
浮動的元素會被父級計算高度(父級元素觸發了bfc)
非浮動元素不會覆蓋浮動元素的位置(非浮動元素觸發了bfc)
margin不會傳遞給父級(父級觸發bfc)
屬於同乙個bfc的兩個相鄰元素上下margin會重疊
普通文件流布局: 浮動的元素是不會被父級計算高度
非浮動元素會覆蓋浮動元素的位置
margin會傳遞給父級元素
兩個相鄰元素上下的margin會重疊
開發中的應用
塊格式化上下文（block formatting context，bfc） 是web頁面的視覺化css渲染的一部分，是塊盒子的布局過程發生的區域，也是浮動元素與其他元素互動的區域。
建立乙個會包含這個浮動的bfc，通常的做法是設定父元素 overflow: auto 或者設定其他的非預設的 overflow: visible 的值。
建立新的bfc避免兩個相鄰div之間的外邊距合併問題
乙個新的 display 屬性的值，它可以建立無***的bfc。在父級塊中使用 display: flow-root 可以建立新的bfc。
給div加display: flow-root 屬性後，div中的所有內容都會參與bfc，浮動的內容不會從底部溢位。
1doctype html
>
2<
html
lang
="en"
>
3<
head
>
4<
meta
charset
="utf-8"
>
5<
title
>bfc
title
>
6<
style
type
="text/css"
>7/*
*建立乙個會包含這個浮動的bfc，通常的做法是設定父元素 overflow: auto 或者設定其他的非預設的 overflow: visible 的值。**/8
.box
14.float
22/**23
* 建立新的bfc避免兩個相鄰 之間的外邊距合併問題
24*/
25.blue, .red-inner
2930
.blue
3334
.red-outer
38style
>
39head
>
40<
body
>
41<
div
class
="box"
>
42<
div
class
="float"
>i am a floated box!
div>
43<
p>i am content inside the container.
p>
44div
>
4546
<
div
class
="blue"
>
div>
47<
div
class
="red-outer"
>
48<
div
class
="red-inner"
>red inner
div>
49div
>
50body
>
51html
>
優點：簡單、**少、瀏覽器支援好
缺點：不能和position配合使用，因為超出的尺寸的會被隱藏。（不建議使用此種方式，可能會影響頁面元素布局）
1clearfix
4clearfix:after
優點：瀏覽器支援好、不容易出現怪問題，寫法是固定的，不理解也可以直接複製使用；
缺點：css**多、不少初學者不理解原理，要兩句**結合使用才能讓主流瀏覽器都支援
float浮動 清浮動BFC渲染機制
float浮動，用於 橫向布局 起初的橫向布局都用 display inline block 但是這會導致兩個元素之間有空隙，而這是由 換行解析成空格的，解決元素間有空隙，空格 font size 0 但影響很大。float浮動會破壞 line box 即浮動元素 脫離文件流 當給乙個元素設定浮動了...
BFC和浮動元素
block format context 如何觸發乙個盒子的bfc 用以下方式 position absolute display inline block float left right overflow hidden right.left加入bfc解決 margin left 100px ma...
CSS的浮動問題
浮動的工作原理 浮動元素脫離文件流，不佔據空間。浮動元素碰到包含它的邊框或者浮動元素的邊框則停留。浮動元素可能引起的問題 1.父元素的高度無法被撐開，影響與父級元素同級的元素 2.與浮動元素同級的非浮動元素會跟隨其後 3.若非第乙個元素浮動，則該元素之前的元素也需要浮動，否則會影響頁面的顯示結構 清...