盒子高度塌陷问题

目录

一、什么是盒子高度塌陷

盒子高度塌陷：

二、解决方法

方法1、可以在父元素下面加个 ::after 伪类

方法2、可以直接设定父元素的高度

方法3、给父元素使用"overflow: hidden;"

方法4、可以在子元素的最后面增加

方法5、可以在父元素增加浮动

---

一、什么是盒子高度塌陷

盒子高度塌陷：

本应在父盒子内部的元素跑到了外部
在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高。但是当子元素设置浮动之后，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。

<div class="d1">
        <div>子元素内容</div>
        <div>子元素内容</div>
</div>

.d1 div{
    float: left;
    height: 100px;
    width: 100px;
    border: 1px solid rgb(29, 28, 28);
    background-color: skyblue;
}
.d1{
    background-color: slateblue;
    border: 1px solid green;
}

 

 此时的子元素无法撑起父元素的高度

二、解决方法

方法1、可以在父元素下面加个 ::after 伪类

.d1::after{
    content: "";
    display: block;
    clear: both;
}

 此时的父元素的高度就与子元素的高度一致，宽度与页面浏览器保持一致

方法2、可以直接设定父元素的高度

缺点：在后期子元素内的高度若是有改动，可能会对父元素造成影响。并且更改时，对高度也要进行计算。

方法3、给父元素使用"overflow: hidden;"

这时的父元素高度等于子元素的高度，但是可能会造成滚动条的出现，即使滚动条之外的页面并没有内容，但滚动条依旧存在，影响美观。

方法4、可以在子元素的最后面增加<br style="clear: both;">

<div class="d1">
        <div>子元素内容</div>
        <div>子元素内容</div>
        <br style="clear: both;">
</div>

此时的父元素的高度等于子元素的高度，宽度等于页面浏览器的宽度

方法5、可以在父元素增加浮动

此时的父元素的高度与子元素的高度一致，宽度也是一致

缺点：浮动会使页面布局较为难以掌控