【css:float导致的高度塌陷与解决办法】

---

前言

1.需求

按钮需要始终浮动于右侧，同时下方的表格也要撑满屏幕。

2.遇到的问题与进化的解决思路

按钮始终位于右侧可以使用float解决，同时计算该元素的高度，从而实时控制表格的高度。然而遇到了这种问题，float属性生效的情况下（图一的情况）就无法计算节点高度从而无法精确设置表格高度。该问题转变为解决float导致的塌陷问题上。

一、什么是高度塌陷

高度塌陷简单说就是，父级元素包涵的子元素浮动了，当父级元素没有设置高度时，会因为没有子元素“撑开”，而变成一条线。

二、如何解决高度塌陷

1.大多数的解决思路。

①给父元素添加固定高度。

缺点:不适合高度自适应的布局。

②给父元素添加overflow:hidden;

缺点:不适合和定位定出去的页面布局使用

③给所有的浮动盒子最后添加一个空的标签,例如 div,且添加声明 clear:both;

缺点:多了很多空的标签,造成代码冗余

④给塌陷的父元素:after{content:“”;display:block;clear:both; visibility:hidden;}

缺点:相对麻烦

2.我介绍的解决方案

①给父元素添加display:flow-root。

这个方法不会出现任何的副作用，他的诞生就是用来解决高度塌陷，生成一个块级元素盒子，但是由于19年引入的布局方式，在相对老版本的浏览器上不能支持。

---