前端三剑客之CSS---浮动的难点解析二（高度塌陷和BFC)

1. 高度塌陷

引起高度塌陷的原因：
当父元素没有设置宽度时，如果里面的子元素浮动了，那么就会脱离文档流，父元素的高度就无法由子元素撑起来，就会发生塌陷现象.
明确一点：块级元素在没有设置高度的情况下，都是由内部的子元素决定的！
可以设置高度的元素类型有：块级元素、行内块级元素以及脱离文档流的元素（浮动或者定位）

高度塌陷对页面布局的影响：
父元素高度塌陷后，子元素就会脱离文档流，对下面的元素产生影响！
如何解决此问题？就是下面的BFC。

2. BFC

2.1 定义

Block formatting Context块级格式化环境。它是css一个隐含的属性，开启BFC的元素会产生独立于当前网页布局的一个环境。因此可以和正常布局分开，从而实现特定功能！

2.2 作用

1. 开启BFC的元素会变成一个单独的布局环境。
2. 开启BFC的元素不会被浮动元素盖住。
3. 开启BFC的元素和其子父元素的外边距不会发生重叠。
4. 开启BFC的元素可以包含浮动的子元素。

2.3 如何开启BFC

现在主要使用BFC解决的是包含浮动的子元素，有以下几种方式：
使用BFC虽然可以清除浮动的影响，但是多多少少都会存在副作用，因此不适合最好的方式！

1. 给父元素也设置浮动，这样父元素的宽度和高度就由子元素决定，也就是浮动的子元素的宽度和高度。但是会引起一个缺点：父元素不再满足水平布局公式，宽度会受影响，而且会影响下面的布局。
2. 将父元素改为行内块元素，此时也会引起一个缺点：行内块元素也不满足水平布局公式，因此宽度也会受影响，由子元素决定。
3. 给父元素的overflow的值设置为非visible值！ 推荐做法！

清除浮动并不是使用这种方式，比较副作用太大！