其他分享
首页 > 其他分享> > 盒子高度塌陷问题

盒子高度塌陷问题

作者:互联网

目录

一、什么是盒子高度塌陷

盒子高度塌陷:

二、解决方法

方法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、可以在父元素增加浮动

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

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

标签:盒子,元素,高度,塌陷,方法,页面
来源: https://blog.csdn.net/Han_Zhou_Z/article/details/121258412