解决盒子塌陷的5种方法

在逃小屁王

已于 2024-09-29 11:57:59 修改

阅读量314

点赞数 3

文章标签： javascript 前端 css3 html5

于 2024-09-24 16:00:15 首次发布

本文链接：https://blog.csdn.net/weixin_56473118/article/details/142490798

版权

咱先来一个小demo展示一下什么是盒子塌陷

这是我想要的效果

但是我却得到了......

子级的两个盒子跑到了父级的边框外面。

这是因为父级盒子没有设置固定高度，是靠子级盒子撑起来的。

子级盒子float浮动后，脱离了正常的文档流，不能再将父级盒子撑起，导致塌陷。

还有就是，float浮动最初被设计的初衷是为了实现文字环绕效果，现在也被用作布局工具。

那么如何解决父级盒子的塌陷问题呢？我总结了以下5种方法供你选择

父级同时浮动
给父级添加固定高度
父盒子里最下方引入清除浮动块：<div style="clear:both;"></div> 或者 <br style="clear:both;">
父级设置overflow：hidden属性（示例代码采用该方法）
通过after伪元素：
父级元素选择器:after {

content: "";

clear: both;

display: block;

height: 0;

}

我把代码贴到下面，代码里我用的是第四种方法，大家也可以自己试试剩下的方法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father {
            width: 500px;
            border: 5px solid red;
            margin: 20px auto;
            /* 解决父级塌陷 */
            overflow: hidden;
        }

        .father div {
            width: 50%;
            height: 200px;
            float: left;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="left" style="background-color: aqua;"></div>
        <div class="right" style="background-color: aquamarine;"></div>
    </div>
</body>

</html>