高度塌陷与BFC特性

高度塌陷

当父元素未设置高度时，所有子元素浮动后，会造成子元素脱离文档流进而无法把父元素撑开，父元素高度为0产生高度塌陷，称为高度塌陷问题。

父元素高度塌陷后，父元素以下的元素都会向上移动，导致布局混乱。

解决

1、直接定高

2、触发BFC

• 可以通过给box添加overflow: hidden;等声明触发BFC。

3、清除浮动

比如在所有浮动元素后面增加空div clear both，或者增加after伪元素来完成浮动的清除。

如何理解BFC？

BFC（Block Formatting Contexts ） 就是即块级格式化上下文。是Web页面中盒模型布局的CSS渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。

可以这样来理解, 将 BFC 理解为一个完全封闭的盒子, 盒子内部的元素无论如何摆放, 也不会影响到盒子外面.

只要元素触发以下任意一条, 便视其具有 BFC 特性.

• body 根元素.
• 浮动元素: float 除 none 以外的值.
• 绝对定位元素: position 为 (absolute || fixed).
• display 为 (inline-block || table-cells || flex).
• overflow 除了 visible 以外的值 (hidden || auto || scroll).

BFC特性如下：

• 1.元素垂直方向的距离由margin决定。属于同一个BFC的两个相邻元素的margin会发生叠加；
• 2.计算BFC的高度时，浮动元素也参与计算（当BFC内部有浮动时，为了不影响外部元素的布局，BFC计算高度时会包括浮动元素的高度）；
• 3.都是从最左边开始的。每个元素的margin box的左边，与包含块border box的左边(对于从左往右的格式化，否则相反)；
• 4.BFC的区域不会与float box叠加 ；
• 5.内部的元素会在垂直方向，从顶部开始一个接一个地放置；
• 6.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。