前言
使用浮动布局时，经常会有子元素使用浮动导致父元素高度丢失的问题，非常影响页面布局。本文介绍了高度塌陷形成的原因，以及清除浮动解决高度塌陷问题的几种方法。
float
通过浮动可以使一个元素向其父元素的左侧或右侧移动。
- 元素设置浮动以后，水平布局的等式便不需要强制成立。
- 元素设置浮动以后，会完全从文档流中脱离，不再占用文档流的位置。
- 所以元素下边的还在文档流中的元素会自动向上移动。
浮动元素会完全脱离文档流，不再占据文档流中的位置。
文档流
网页是一个多层的结构，一层摞着一层，通过 CSS 可以分别为每一层来设置样式，作为用户只能看到最顶上一层。这些层中，最底下的一层称为文档流。
文档流是网页的基础。我们所创建的元素默认都是在文档流中进行排列。
元素主要有两个状态：在文档流中、不在文档流中（脱离文档流）。
脱离文档流后元素不需要再区分块和行内，不在独占页面的一行，宽度和高度默认都被内容撑开。
高度塌陷
在浮动布局中，父元素的高度默认是被子元素撑开的，当子元素浮动后，其会完全脱离文档流，子元素从文档流中脱离将会无法撑起父元素的高度，导致父元素的高度丢失。父元素高度丢失以后，其下的元素会自动上移，导致页面的布局混乱。
高度塌陷的本质就是元素脱离文档流导致的高度丢失，其解决方法也往往在于找回高度撑起父元素上。
解决方法
其实不使用浮动布局就……
当你将父元素也设置浮动之后会发现，父元素高度就不塌陷了，噫，布局好了！你好了甚么这个时候祖宗元素就塌陷。将父元素也设置浮动无法解决浮动塌陷问题。
BFC
BFC 不会和浮动元素重叠。为元素设置overflow:hidden开启其 BFC 以使其可以包含浮动元素。
display：flow-root同样是一种解决方案。
父元素固定高度
给父元素设置固定高度，这样就不会塌陷了，但实际应用中，我们往往希望高度是自适应的，这种方法并不好。
clear
clear属性指定一个元素是否必须移动 (清除浮动后) 到在它之前的浮动元素下面。
clear可以清除浮动元素对当前元素所产生的影响。
left：清除左侧浮动元素对当前元素的影响。right：清除右侧浮动元素对当前元素的影响。both：清除两侧中最大影响的那侧。
原理：设置清除浮动以后，浏览器会自动为元素添加一个上外边距，以使其位置不受其他元素的影响。
添加空标签
在浮动元素末尾添加一个空的非浮动标签例如 <div style="clear:both"></div>，这样就可以由该元素撑起父元素高度，但这会导致页面结构冗余，十分突兀，并不推荐。
::after伪元素清除浮动
添加空标签的改进方法，使用::after伪元素在父元素后添加非浮动内容来撑起父元素高度，并且不会导致页面结构冗余。
.parents::after{
content:'';
display: block;
clear:both;
}
clearfix
单独实现clearfix这个样式，然后给父元素添加 clearfix 类，是个通用的方式。
.clearfix::after {
content: "";
clear: both;
display: table;
}
参考资料
前端面试题之CSS篇
CSS解决高度塌陷的方法 - 掘金
清除浮动的几种方式（解决高度塌陷问题） - 掘金
【Web前端HTML5&CSS3】09、高度塌陷与 BFC - 掘金
