我正在参与掘金创作者训练营第5期，点击了解活动详情
css 高度坍塌，想必每个前端银er开发过程中都会遇到，现我们就一起来探讨一下，看看都有啥解决方法，哪个解决方法更美妙。
话不多说，直接上‘ 才艺 ’。
问题重现
正常布局，父元素不设置固定高度，父元素的高度，都是由内部未浮动子元素的高度撑起的，它是这样的效果：
这个时候，如果给 content 来一个 float: left; ，就会惊讶的发现，效果变成这样：
content 元素浮动起来，它就不会占用普通文档流的位置，只有未浮动的 header 元素和 footer 元素占用位置，因此父元素的高度就会失去 content 元素高度的那部分，俗说失去 content 元素高度的支撑，形成高度坍塌。
如图所示，即使 header 元素和 footer 元素留在普通文档流布局中支撑着父元素，但是 content 元素还是超出了父级盒子，布局异常丑陋，可能会导致整个页面的布局乱套，丑的用户都不会多看一眼。
问题有了，剩下的就是来看看到底该怎么解决这个问题了。
问题解决
不提倡的方法
估计大家最快想到的就是，很简单啊，给父级来一个固定高度不就ok了，就解决高度坍塌了。
但是实际开发当中，大家都是知道的，多数情况下，父元素高度由内容撑起，很难提前固定父元素的高度。这种设定固定高度的方法就不那么完美了，不是很提倡。
那下面看看提倡的解决方法。
1、为父元素设置 overflow:hidden 属性
效果如下图：
原理: CSS 中的 overflow :hidden 属性会强制要求父元素必须包裹住所有内部浮动的元素，以及所有元素的 margin 范围。
缺点：如果刚好父元素有些超范围的子元素内容需要显示(比如，个别 position 定位的子菜单项)，不想隐藏，就会发生冲突。如京东导航菜单：
2、在父元素内的结尾追加一个空子元素（块级元素），并设置空子元素清除浮动影响（ clear:both ）
效果如下图：
原理: 利用 clear:both 属性和父元素必须包含非浮动的元素两个原理
缺点: 无端多出一个无意义的看不见的空元素，影响选择器和查找元素。
3、设置父元素也浮动
效果如下图：
原理: 浮动属性也会强制父元素扩大到包含所有浮动的内部元素。
缺点: 会产生新的浮动影响。比如，父元素浮动，导致父元素之后平级的页脚div上移，被挡住了。
解决：设置父元素之后的平级元素清除浮动（ clear:both ）。如下图：
4、为父元素末尾伪元素设置 clear:both
效果如下图：
优点: 既不会影响显示隐藏，又不会影响查找元素，又不会产生新的浮动问题
问题：个别浏览器，display:table，可能带默认高度
保险起见: 再加一个属性 height:0px
.father::after {
content: "";
display: table;
clear: both;
height: 0;
}
小结
大家踊跃提出更好的解决方案。
顺便给东哥做个宣传，出师东哥。
