前端----高度塌陷及解决办法(最详细解)

高度塌陷产生原因:

在浮动布局中，父元素的高度默认被子元素撑开，当子元素浮动后，其会完全脱离文档流，子元素从文档流中脱离将会无法撑起父元素的高度，导致父元素的高度丢失。

解决高度塌陷缘由:

由于高度塌陷会影响页面中其他元素的布局(父元素塌陷后，其下面的元素将会自动上移)，将会导致页面混乱，因此解决高度塌陷是不可逃避的问题。

解决办法:

1.将父元素高度写死，这样可避免高度塌陷，但这样也会让父元素高度不再被子元素撑开，将会导致各种问题，因此这种方法不推荐。

2.开启BFC
BFC(Block Formatting Context) 块级格式化环境
BFC是一个CSS中的一个隐含属性，可以为一个元素开启BFC，开启BFC该元素会变成一个独立的布局区域，但开启BFC后都会有或多或少的副作用，因此需要挑选一个副作用最小的方法来开启。

关于元素开启BFC后变成独立布局区域的个人理解解释：

可以将开启BFC后的元素看成一个譬如html的大容器，此时其中的子元素便相对于父元素定位，此时设置外边距便不会发生重叠问题。

元素开启BFC后特点：
1.开启BFC的元素不会被浮动元素所覆盖
2.开启BFC的元素子元素和父元素外边距不会重叠(关于外边距重叠问题在后续博客会详细解释)
3.开启BFC的元素可以包含浮动的子元素(解决高度塌陷）

这三个特点很重要，因此需要牢记并熟练运用

由于BFC是CSS中的隐含属性可以理解为抽象存在的，所以不能对元素直接开启，可以通过一些特殊方式来开启元素的BFC：
1.设置元素的浮动(不推荐,高度塌陷解决，但是宽度跟随消失)
2.将元素设置为行内块元素(不推荐,高度塌陷解决，但是宽度跟随消失)
3.将元素的overflow设置为一个非visible的值
- 常用方式：为元素设置 overflow: hidden 开启其BFC 以使其可以包含浮动元素
当然这三个是常用的开启BFC方式，更多开启BFC的方式可自行查找.

下面介绍一个更厉害的方法
你可以在塌陷父元素的末尾设置一个伪元素after将内容设为空白，并设置为块元素，同时用clear清除兄弟浮动元素带来的影响，从而将父元素撑起，代码如下:

div::after{
content:'';
dispay:block;
clear:both;
}

最后希望大家都能爱上费曼先生

这个算法是以著名物理学家理查德·费曼命名的，其步骤如下：
(1) 将问题写下来。
(2) 好好思考。
(3) 将答案写下来。
——Aditya Bhargava《算法图解》

（只能说计算机科学家是一群不按常理出牌的人）

愿我们都能心想事成!!!