BFC块级格式化上下文

BFC

Blocking Fomatting Context 块格式化上下文

是Web页面的可视化CSS渲染的一部分，是浮动元素与其他原色交互的区域

 

①BFC是一个独立的布局空间，BFC内部元素布局与外部互不影响

②可通过一些条件触发BFC

 

触发条件:

①根元素html

②float不为none

③overflow不为visible

④display为inline-block、table-cell、tabel-caption、flex、inline-flex

⑤position为absolute、fixed

 

特性:

①属于同一个BFC的两个相邻容器的上下margin会重叠

②计算BFC高度时，浮动元素也参与计算

③BFC的区域不会与浮动容器发生重叠

④BFC的容器在垂直方向依次排列

⑤元素的margin-left与其包含块的border-left相接触

⑥BFC是独立容器，容器内部元素不会影响容器内部元素