今天我们来看看非常常见的一个问题,那就是高度塌陷问题,我相信很多朋友在布局的时候都会遇到高度塌陷问题,那么今天我们来看看如何解决它。
高度塌陷
我们在设置父元素的时候一般都不会设置它的高度,我们通常会给里面填内容,让父元素被子元素撑开。那么这个时候就出现问题了,如果子元素浮动,那么父元素的宽度就会塌陷。这样我们的页面就会混乱,这就是我们一般说的高度塌陷问题。
高度塌陷的解决办法
一、给父元素设置一个高度
这样可以给父元素一个高度让他不会塌陷,但是非常不推荐使用。
二、开启BFC (Block Formatting Context)
当元素开启BFC之后,元素会变成独立的区域,不会在布局上影响外面的元素。
我们可以把BFC可以理解为一个封闭的大箱子,箱子里可以装很多乱七八糟的东西,这并不影响外面的事物。所以同理元素开启BFC之后不会影响外面元素。
三、高度塌陷的第三种解决办法(完美)
用clear属性
在高度塌陷的父元素的最后加一个空白的div,由于这个div没有浮动,使用可以撑开父元素的高度,然后对这个空白的div进行清除浮动。不一定的是div,其他块元素都可以
基本没有副作用
如下图所示
.box3{
clear: left;
}
四、高度塌陷的第四种解决办法(完美)
这个办法是基于第三种办法转变过来的
就是运用用伪类::after
如下图所示
.box1::after{
content: '';
display: block;
clear: both;
}