BFC
BFC 及其应用
BFC(Block Format Context)块级格式化上下文,是页面盒模型中的一种 CSS
渲染模式,相当于一个独立的容器,里面的元素和外部的元素相互不影响。
BFC的目的就是形成一个完全独立的空间,让空间中的子元素不会影响到外面的布局。它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用,当涉及到可视化布局的时候,BFC提供了一个环境,HTML元素在这个环境中按照一定规则进行布局。
创建 BFC
的方式有:
html
根元素float
浮动- 绝对定位
overflow
不为visible
display
为表格布局或者弹性布局;
BFC
主要的作用是:
- 清除浮动
- 防止同一
BFC
容器中的相邻元素间的外边距重叠问题
BFC的布局规则:
内部的box会在垂直方向,一个接一个的放置,
Box垂直方向的距离由margin决定,属同一个BFC的两个相邻Box的margin会发生重叠。
BFC的区域不会与float box重叠。
BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之如此
每个盒子的margin box的左边,与包含块border box的左边相接触,即时存在浮动也是如此。
如何创建BFC:
Float的值不是none。
Position的值不是static或者relative、
Display的值是inline-block、table-cell、flex、table-caption或者inline-flex。
Overflow的值不是visible。
三种情况
父元素不设置高度 子元素浮动会出现父元素高度塌陷
不存在BFC情况下会出现margin重叠
每个盒子的margin box的左边,与包含块border box的左边相接触,设置BFC不会与浮动重叠