今天认真仔细地看了下BFC的内容,算是有了更具体的理解
BFC(块级格式化上下文)
BFC的触发条件
- 根元素或其他包含它的元素
- 浮动元素 (元素的 float 不是 none)
- 绝对定位元素 (元素具有 position 为 absolute 或 fixed)
- 内联块 (元素具有 display: inline-block)
- 表格单元格 (元素具有 display: table-cell,HTML 表格单元格默认属性)
- 表格标题 (元素具有 display: table-caption, HTML 表格标题默认属性)
- 具有 overflow 且值不是 visible 的块元素
- display: flow-root 的元素
- column-span: all 的元素
BFC导致的现象
- 内部的 box 将会独占宽度,且在垂直方向,一个接一个排列
- box 垂直方向的间距由 margin 属性决定,但是同一个 BFC 的两个相邻box 的 margin 会出现边距折叠现象
- 每个 box 水平方向上左边缘,与 BFC 左边缘相对齐,即使存在浮动也是如此
- BFC 区域不会与浮动元素重叠,而是会依次排列
- BFC 区域内是一个独立的渲染容器,容器内元素和 BFC 区域外元素不会形成任何干扰
- 浮动元素的高度也参与到 BFC 高度的计算当中
目前为止 最常用的BFC操作有
- 通过设置元素display:inline-block消除边距折叠
- 给相邻元素或父元素设置 display:inline-block 清除浮动 和给浮动元素设置overflow:hidden清除浮动