CSS中几种解决高度坍塌方式分析

Posted 2021-06-27 十九万里

优秀的你，才能遇到优秀的世界

为什么会产生高度坍塌：

父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高。
但是当为子元素设置浮动以后，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。

先上结论,清除浮动的方式：

1、给父元素添加overflow：hidden
2、在浮动元素下方添加空div，并给元素声明 clear：both
3、使用after伪类选择器清除浮动
4、父元素添加浮动
5、给父元素设定高度

一、父元素添加overflow：hidden

overflow：hidden是用于清除浮动的，本意就是把多余的部分隐藏，但是为什么隐藏之后父元素就不会出现高度坍塌呢
添加overflow：hidden原理其实是产生了BFC

1、BFC

什么是BFC：

BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

怎么创建BFC：

1、float的值不是none。
2、position的值不是static或者relative。
3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex
4、overflow的值不是visible

BFC的作用：

1、避免margin重叠
2、自适应两栏布局
3、清除浮动

从BFC的创建和作用中可以总结出：

overflow：hidden这个属性创建了BFC BFC 又可以清除浮动 所以overflow：hidden可以清除浮动
了解大概主体之后，我们开始分析其原理

原理

上面说到没有给父元素设置高度时。父元素的高度是被子元素撑开的，设置子元素浮动之后，在文档流中就没有了高度，所以父元素也没有高度，导致高度坍塌
父元素触动BFC之后，也脱离文档流，（相当于包含浮动流），所以子元素的高度依然可以撑起父元素。

优缺点

优点：代码少、简单
缺点：1、只适用于高版本游览器，IE6不支持。
2、不能和position定位配合使用，超出的尺寸会被隐藏

二、在底部加一个空元素

在底部加一个空元素并清除浮动
clear：both
这样的话底部的这个空元素是没有浮动的 能托起父元素的高度
但是一般不建议这样使用 添加一个空元素可能会造成语义等其他问题

优点：代码少，浏览器兼容好，只需要兼容 IE 浏览器，因为在IE兼容部分块元素会自带16px的高度，需要添加 height: 0;overflow: hidden;
缺点：需要添加多余的空标签并添加属性

三、使用伪类选择器清除浮动

这个方法用的比较多，
在总结这点的时候，一直没想明白，于是从什么是伪类选择器开始入手，
伪元素: 在不动结构代码的前提下,添加元素
伪类选择器：选中这个实际不存在的元素，然后清除浮动之后回归到文档流，就撑起了父元素的高度，解决了高度坍塌
注： 由于IE6-7不支持:after，使用 zoom:1触发 hasLayout

那么另外一个问题又来了

使用：before和：after 同时使用双伪元素清除浮动有什么区别？
从语言上来讲 ：before是在元素前加一个伪元素，：before是在元素后加一个伪元素，看上去好像没有什么不同，
目前查看的资料博客没有关于这个解释的，等我会了在回来补。

四、给父元素设置成为浮动元素

这点也比较好理解，因为高度坍塌就是子元素脱离文档流，父元素仍然在文档流造成的，现在给父元素设置浮动 那么父元素也就自然包含了子元素，

缺点：会产生新的浮动问题 所以一般不适用，只是一个思路

五、给父元素设置高度

既然子元素没有高度来撑起父元素，那么我们手动给父元素设置一个合适的高度就ok了
优点是代码量少，好理解
缺点是需要手动计算父元素的高度 固定之后如果子元素发生改变还需单独修改父元素的高度