css知识点

vertical-align

设置的是行内元素的对齐方式，即display为inline、inline-table、inline-block、table-cell的元素。

作用：

设置基线对齐的方式

​ 取值：baseline（默认值）基线对齐、

BFC

bfc特点：

1

块级格式化上下文，相当于一个容器，不会影响容器外。bfc的高度与bfc子元素有关，包括浮动的子元素，当然不是子元素的浮动元素是不行的（造成常见的高度坍塌）。bfc域和float box不重合。一般情况下（从左到右），子元素的margin-left与包含块的border-lefr是重合的。

触发条件（￣︶￣）↗　

1
2
3
4
5

1、float不为none
2、position为absolute绝对定位，或者是fixed固定定位
3、display为inline-block、table-cell、flex
4、overfl不为none
5、根元素html

应用

1
2
3
4
5
6

1、同一个bfc垂直方向margin坍塌的问题，解决：再创建一个bfc的容器

2、父元素高度坍塌，因为非bfc的浮动元素不参与bfc的高度计算（意思是会参加宽度计算），解决：给浮动元素创建bfc

3、自适应两栏布局，解决浮动元素与包含元素左边紧贴的问题，因为bfc不会和浮动区域重叠