[toc]
## BFC行为表现
如果一个元素具有BFC,内部子元素再怎么翻江倒海、翻云覆雨,都不会影响外部的元素。
所以,BFC元素是不可能发生margin重叠的,因为margin重叠是会影响外面的元素的;
BFC也可以用来清楚浮动的影响,因为如果不清楚,子元素浮动则父元素高度塌陷,必然会影响后面元素布局和定位,这显然有违BFC的子元素不会影响外部元素的设定。
## html文档元素也触发了BFC
![](https://box.kancloud.cn/9f2b650e32c28e87c0018fc73f33035a_665x264.png)
可以发现上图中body虽然浮动了,但html依然被撑开了(参见BFC约束规则5)
为什么html会触发BFC,参见原文这一段
>Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with 'overflow' other than 'visible' (**except when that value has been propagated to the viewport**) establish new block formatting contexts for their contents.
## 触发BFC从而清楚浮动具有穿透性
这是什么意思呢?
我们从上面知道了html会触发BFC,如果我们在body里有一个具有高度的元素,这元素被浮动
,那么,此时html的高度是怎样的呢?
html高度并不会0,浮动元素的高度会透过body传给触发了BFC的html
这并不是html本身的特殊性,而是所有触发了BFC的元素都会具有这种特性
## 常用声明
![](https://box.kancloud.cn/9c09c98ba189a7d2829499c0d5d51c39_538x300.png)
- 空白目录
- 未处理
- webpack中的css模块化
- CSS预处理器
- 效果
- 元素装饰与美化
- 颜色
- checkbox
- img
- background
- clip-path
- 字体
- 文本控制
- text-indent
- letter-spacing
- word-spacing
- word-break和word-wrap
- white-space
- text-align
- text-decoration
- text-transform
- first-letter
- first-line
- 有关CSS百分单位的那些奇葩事儿
- 破坏性、包裹性、块状化
- 强大的absolute
- padding
- relative
- 继承性
- fixed
- float
- BFC
- z-index
- overflow
- clip
- 最佳可访问性隐藏
- 关于scrollHeight/Width
- 包含块
- margin
- 布局系统
- 杂
- Flex
- Grid
- 自定义布局系统
- gutter实现思路
- 选择器
- 伪元素和伪类
- css3
- appearance
- CSS2.1
- tmp
- 未定义行为
- 焦点元素
- outline轮廓
- 替换元素
- 盒子模型
- 块级元素/盒子
- 标记盒子
- 容器盒子(内在盒子)
- 内联元素/盒子
- 字母X
- line-height
- vertical-align
- font-size
- 内联元素盒子模型新解
- line-height定义
- line-height与行内框盒子模型
- line-height与内联元素的高度机制
- line-height值
- line-height与图片
- vertical-align支持的属性值及组成
- vertical-align起作用前提
- vertical-align与图片
- vertical-align与line-height
- vertical-align前后不一的行为表现
- vertical-align实际应用
- line-height与height
- width/height与auto
- 最小内容宽度
- 最大内容宽度
- min/max-width/height注意事项
- 流:外部尺寸与内部尺寸
- 流体布局下的宽度分离原则
- height:auto
- 浏览器渲染原理
- 移动端