CSS高度塌陷的问题的解决方案

目录

•  

 

---

什么是高度塌陷?

父元素高度自适应，子元素float之后，造成父元素高度为0，称为高度塌陷。他的产生条件就是子元素浮动
如图


如图：.top-bar-wrapper是.location和.shortcut的父类。.location和.shortcut中设置了浮动。而父类.top-bar-wrapper中高度设置的是自适应，就会出现了高度塌陷，此时.top-bar-wrapper
】中设置的背景颜色就会没有作用了。

方法一：为父元素设置高度

给父元素添加固定高度，适合做高度固定的布局

建议：不推荐使用，只建议高度固定的布局使用

方法二：给父元素添加overflow:hidden

优点：简单，代码少，浏览器支持好

缺点：不能和position配合使用，因为超出的尺寸会被隐藏

建议：在页面布局中如果经常使用到定位不建议使用这个方法解决高度塌陷问题

方法三：给父元素结尾添加div标签clear:both

优点：简单、代码少、浏览器支持好、不容易出现怪问题

缺点：不少初学者不理解原理，需要增加多余的空标签，让人感觉不好

建议：不推荐使用，但是此方法是以前主要是用的一种清除浮动的方法

方法四：给父元素加入万能清除法

.clearfix::before,

.clearfix::after{

content: '';

display: table;

clear: both;

}

将.clearfix加入父元素

优点：浏览器支持好、不容易出现怪问题

缺点：代码多、不少初学者不理解原理，要两句代码结合才能让主流浏览器都支持

建议：推荐使用，建议定义公共类，以减少CSS代码

回到顶部