1、BFC是什麼?css
在解釋 BFC 是什麼以前,須要先介紹 Box、Formatting Context的概念。html
Box 是 CSS 佈局的對象和基本單位, 直觀點來講,就是一個頁面是由不少個 Box 組成的。元素的類型和 display 屬性,決定了這個 Box 的類型。 不一樣類型的 Box, 會參與不一樣的 Formatting Context(一個決定如何渲染文檔的容器),所以Box內的元素會以不一樣的方式渲染。讓咱們看看有哪些盒子:css3
Formatting context 是 W3C CSS2.1 規範中的一個概念。它是頁面中的一塊渲染區域,而且有一套渲染規則,它決定了其子元素將如何定位,以及和其餘元素的關係和相互做用。最多見的 Formatting context 有 Block fomatting context (簡稱BFC)和 Inline formatting context (簡稱IFC)。ide
CSS2.1 中只有 BFC
和 IFC
, CSS3 中還增長了 GFC
和 FFC。
佈局
BFC(Block formatting context)直譯爲"塊級格式化上下文"。它是一個獨立的渲染區域,只有Block-level box參與, 它規定了內部的Block-level Box如何佈局,而且與這個區域外部絕不相干。flex
2、觸發BFC(方法不少,適應於不一樣的場景)spa
3、應用3d
一、清楚浮動(第6條規則)code
<style type="text/css"> .father{ border: 2px solid green; } .son{ width: 100px; height: 100px; border: 2px solid red; float: left; } </style> <body> <div class="father"> <div class="son"></div> <div class="son"></div> </div>
顯而易見,子元素的浮動致使父元素坍塌!以下圖:
<style type="text/css"> .father{ border: 2px solid green; overflow: hidden; //觸發父元素的BFC清除浮動; } .son{ width: 100px; height: 100px; border: 2px solid red; float: left; } </style> <body> <div class="father"> <div class="son"></div> <div class="son"></div> </div>
二、自適應兩欄佈局(第三、4條規則)orm
<style type="text/css"> .aside{ width: 100px; height: 150px; float: left; background-color: green; } .main{ height: 200px; background-color: red; } </style> <body> <div class="aside"></div> <div class="main"></div>
第3條。
<style type="text/css"> .aside{ width: 100px; height: 150px; float: left; background-color: green; } .main{ overflow: hidden;//第4條 也很明顯的體現了第5條 height: 200px; background-color: red; } </style> <body> <div class="aside"></div> <div class="main"></div>
3、防止margin垂直合併(第2條)
<style type="text/css"> .box{ width: 100px; height: 100px; background-color: green; margin: 100px; } </style> <body> <div class="box"></div> <div class="box"></div>
//同一個BFC內垂直margin重疊
<style type="text/css"> .box{ width: 100px; height: 100px; background-color: green; margin: 100px; } .wraper{ overflow: hidden; } </style> <body> <div class="box"></div> <div class="wraper"> //給下面的box添加一個wraper並觸發其BFC,如今兩個BFC互不影響。 <div class="box"></div> </div>
注:(引自jizhula.com)