BFC布局
阿新 • • 發佈：2017-09-12
lin span play bsp 距離 關系 如何 一個 att
我們常說的文檔流分為普通流、浮動流與定位流三種。
FC(formatting context格式化上下文)，指的是一塊渲染區域，依靠渲染規則，決定其子元素如何布局及與其他元素的關系和作用。
FC分為BFC、IFC、GFC和FFC，其中BFC(block formatting context)塊級格式化上下文
BFC特點
1.內部的box會在垂直方向上，一個接一個地放置
2.box垂直方向的距離由margin決定，屬於同一個bfc的兩個box相鄰的margin會發生重疊
3.每個元素margin box的左邊，與包含box的左邊相接觸，即使是float box
4.bfc的區域不會與float box重疊
5.bfc是一個隔離的獨立容器，容器內的子元素不會影響外面的元素
6.計算高度時浮動元素也參與
BFC觸發條件
1.根元素，即html
2.float不為none
3.position為absolute或fixed
4.display為inline-block、table-cell、table-caption、flex、inline-flex
5.overflow不為visible
常見應用
1.清除浮動元素
通過設置overflow:hidden 閉合浮動，這個不做贅述
2.margin疊加
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .up { width: 100px; height: 100px; background: red; margin: 50px; } .down { width: 100px; height: 100px; background: green; margin: 50px; } </style> </head> <body> <div class="up"></div> <div class="down"></div> </body> </html>
由於up與down都處於html當中，所以默認margin疊加
使用div包裹其中一個，並將此div轉化為BFC布局，則可實現疊加
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .up { width: 100px; height: 100px; background: red; margin: 50px; } .cont-down { overflow: hidden; } .down { width: 100px; height: 100px; background: green; margin: 50px; } </style> </head> <body> <div class="up"></div> <div class="cont-down"> <div class="down"></div> </div> </body> </html>
BFC布局