BFC
概念/特性
BFC 机制能提供一个完全独立的空间,让内部元素无法影响外面的布局.
计算高度时浮动元素也会算入其中.
原理(涉及名词,了解即可)
首先"视觉格式模型"分为"块盒","行内盒"还有"匿名盒",分别对应 block box,inline box 和 anonymous box.
同时涉及了"三种定位方案",常规流,flot 和定位.
而 BFC 是用于决定块盒子的布局及浮动相互影响范围的一个区域.
他的特性是它具备了一个完全独立的空间,让内部元素无法影响外面的布局,同时也会计算内部 flot 元素的高度.
能解决什么问题(重要)
单 float 和普通元素一起使用时 float 脱离文档流导致挤占了常规流元素的位置
原因: float 的特性:常规流环绕在 float 周边,
解决方案: 普通元素设置 bfc,
解决原理: 独立空间,隔绝布局
因 float 形成的高度塌陷问题
原因: 常规流不会计算 float 高度,
解决方案: 父盒子设置 bfc,
解决原理: bfc 会计算 float 元素的高度
相邻元素 margin 重叠问题
原因: 常规流元素的 margin 会相互重叠导致双方取大值进行 margin,
解决方案: 其中一个盒子设置 bfc,
解决原理:防止 bfc 与外部元素发生 margin 重叠
能实现 BFC 的 css 属性
根元素(<html>)或其它包含它的元素.
浮动 (元素的 float 不为 none,常用的 left/right 内部也为 bfc 区域).
绝对定位元素 (元素的 position 为 absolute 或 fixed).
行内块 inline-blocks(元素的 display: inline-block).
表格和表格单元格(元素的 display: table-cell/table).
overflow 值不为 visible 时元素.
弹性盒 flex boxes (元素的 display: flex 或 inline-flex).
参考
内有实现代码, 有能力自己跑跑上述问题,推荐(1)
(1)面试官：请说说什么是BFC？大白话讲清楚
(2)学习 BFC (Block Formatting Context)
