一、什麼是bfc？ifc?
bfc（block formatting context）即「塊級格式化上下文」， ifc（inline formatting context）即行內格式化上下文。常規流（也稱標準流、普通流）是乙個文件在被顯示時最常見的布局形態。乙個框在常規流中必須屬於乙個格式化上下文，你可以把bfc想象成乙個大箱子，箱子外邊的元素將不與箱子內的元素產生作用。
bfc是w3c css 2.1 規範中的乙個概念，它決定了元素如何對其內容進行定位，以及與其他元素的關係和相互作用。當涉及到視覺化布局的時候，block formatting context提供了乙個環境，html元素在這個環境中按照一定規則進行布局。乙個環境中的元素不會影響到其它環境中的布局。比如浮動元素會形成bfc，浮動元素內部子元素的主要受該浮動元素影響，兩個浮動元素之間是互不影響的。也可以說bfc就是乙個作用範圍。在普通流中的 box(框) 屬於一種 formatting context(格式化上下文) ，型別可以是block ，或者是 inline ，但不能同時屬於這兩者。並且， block boxes(塊框) 在 blockformatting context(塊格式化上下文) 裡格式化， inline boxes(塊內框) 則在 inlineformatting context(行內格式化上下文) 裡格式化。
二、bfc的特性是什麼？
1、bfc會阻止外邊距疊加：一般情況，兩個相鄰的塊級框，它們之間的垂直方向的外邊距會發生疊加。 如果這
兩個相鄰的塊框不屬於同乙個bfc就不會疊加！
bfc不會重疊浮動元素
2、乙個bfc的邊框不能和它裡面的元素的margin重疊。這意味著瀏覽器將會給bfc建立隱式的外邊距來阻止它和浮動元素的外邊距的疊加。當給乙個挨著浮動的bfc新增負得外邊距不會起作用！
三、如何觸發bfc?
四、如何清除浮動
css 浮動後的元素不論是什麼display的都預設是block就是設定inline也是block
方式一:使用overflow屬性來清除浮動.ovh
先找到浮動盒子的父元素，再在父元素中新增乙個屬性：overflow:hidden,就是清除這個父元素中的子元素浮動對頁面的影響.
注意：一般情況下也不會使用這種方式，因為overflow:hidden有乙個特點，離開了這個元素所在的區域以後會被隱藏（overflow:hidden會將超出的部分隱藏起來）.
方式二:使用額外標籤法 .clear
在浮動的盒子之下再放乙個標籤，在這個標籤中使用clear:both，來清除浮動對頁面的影響.
a.內部標籤：會將這個浮動盒子的父盒子高度重新撐開
b.外部標籤：會將這個浮動盒子的影響清除，但是不會撐開父盒子.
注意：一般情況下不會使用這一種方式來清除浮動。因為這種清除浮動的方式會增加頁面的標籤，造成結構的混亂.
方法三:使用偽元素來清除浮動(after意思:後來,以後)
clearfix:after
.clearfix
清除浮動 BFC
問題 父盒子高度為0，子盒子不佔位置，子盒子不會撐開父盒子。下面的標準流盒子，會跑到父盒子中的子盒子下面。處理辦法 清除浮動。清除子盒子因為浮動，對父子造成的影響 使用方法 哪兒出問題就在哪兒給 裡面的類名標籤後加乙個clearfix類名。1.clear both 2.overflow hidden...
BFC清除浮動
bfc 就是清除浮動 用來處理文件脫離文件流的問題 清除浮動的方法 a 父元素也新增乙個浮動 產生弊端就是 margin 不能使用 b 給父元素新增乙個 display inline block 弊端同a一樣 無法使用margin c 給父元素新增高 弊端 擴充套件性不好，我們無法隨意再新增元素 d...
浮動布局，以及如何清除浮動
主頁 主頁 冰山一樹sankey csdn主頁 csdn主頁 冰山一樹sankey 網頁布局的本質 用 css 來擺放盒子。把盒子擺放到相應位置.css 提供了三種傳統布局方式 簡單說,就是盒子如何進行排列順序 所謂的標準流 就是標籤按照規定好預設方式排列 行內元素會按照順序，從左到右順序排列，碰到...