前端高频面试题汇总
BFC (块级格式化上下文)
什么是 BFC
BFC 全称为块级格式化上下文 (Block Formatting Context)。它是 W3C CSS 2.1 规范中的一个概念,决定了元素如何对其内容进行定位以及与其他元素的关系和相互作用。当涉及到可视化布局的时候,Block Formatting Context 提供了一个环境,HTML 元素在这个环境中按照一定规则进行布局。一个环境中的元素不会影响到其它环境中的布局。
例如浮动元素会形成 BFC,浮动元素内部子元素主要受该浮动元素影响,两个浮动元素之间是互不影响的。可以将其理解为一个独立的容器,这个容器里 box 的布局与这个容器外的 box 毫不相干。
触发 BFC 的条件
- 根元素或其它包含它的元素
- 浮动元素 (元素的 float 不是 none)
- 绝对定位元素 (元素具有 position 为 absolute 或 fixed)
- 内联块 (元素具有 display: inline-block)
- 表格单元格 (元素具有 display: table-cell,HTML 表格单元格默认属性)
- 表格标题 (元素具有 display: table-caption, HTML 表格标题默认属性)
- 具有 overflow 且值不是 visible 的块元素
- 弹性盒(flex 或 inline-flex)
display: flow-rootcolumn-span: all
BFC 的约束规则
- 内部的盒会在垂直方向一个接一个排列(可以看作 BFC 中有一个的常规流)
- 处于同一个 BFC 中的元素相互影响,可能会发生外边距重叠
- 每个元素的 margin box 的左边,与容器块 border box 的左边相接触 (对于从左往右的格式化,否则相反),即使存在浮动也是如此
- BFC 就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素,反之亦然
- 计算 BFC 的高度时,考虑 BFC 所包含的所有元素,连浮动元素也参与计算
- 浮动盒区域不叠加到 BFC 上
BFC 可以解决的问题
- 垂直外边距重叠问题
- 去除浮动
- 自适应两列布局(
float + overflow)
盒模型
包括内容区域、内边距区域、边框区域和外边距区域。

box-sizing: content-box(W3C 盒子模型):元素的宽高大小表现为内容的大小。box-sizing: border-box(IE 盒子模型):元素的宽高表现为内容 + 内边距 + 边框的大小。背景会延伸到边框的外沿。
IE5.x 和 IE6 在怪异模式中使用非标准的盒子模型,这些浏览器的 width 属性不是内容的宽度,而是内容、内边距和边框的宽度的总和。
布局实现
如何实现左侧宽度固定,右侧宽度自适应的布局
利用 float + margin 实现
.box { height: 200px; }
.box > div { : ; }
{
: ;
: left;
: blue;
}
{
: ;
: red;
}

