原文链接:https://www.nowcoder.com/ta/front-end-interview/review?query=&asc=true&order=&page=12
BFC的定义:
BFC,块级格式化上下文,一个创建了新的BFC的盒子是独立布局的,盒子里面的子元素的样式不会影响到外面的元素。在同一个 BFC 中的两个毗邻的块级盒在垂直方向(和布局方向有关系)的 margin 会发生折叠。
W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行布局,以及与其他元素的关系和相互作用。
BFC的触发方法:
float 元素
position(absolute,fixed)
display (table-cell,table-caption,inline-block)
overflow 除了visible 以外的值(hidden,auto,scroll )
fieldset元素
早期IE的hasLayout会触发一个新的block formatting context
BFC的特性:
- 边缘不和浮动元素重叠
- 不存在collapsing margins问题
第一个特性特别有用,因为元素触发了BFC的话,就不会被float元素覆盖,当子元素全部浮动的时候也能够正确地包含了
第二个margin不会叠加的特性,可以理解为两个处于普通流的盒子,会有margin叠加的问题,是因为他们属于相同的BFC,当他自身创建了一个新的BFC时,这个问题就不存在了