高度塌陷的解决方法

最新推荐文章于 2024-05-20 22:14:20 发布

梵高先生的天空

最新推荐文章于 2024-05-20 22:14:20 发布

阅读量76

点赞数 1

文章标签：前端 html css

本文链接：https://blog.csdn.net/Kevinlonely/article/details/127512766

版权

1.描述

在文档流中，如果没有设置宽度，则父元素的宽度为auto, 高度由子元素撑开；

当子元素设置浮动，则子元素会脱离文档流，此时子元素则无法撑开父元素，导致父元素高度塌陷；

如果父元素塌陷，则父元素下的兄弟元素会上移，导致页面布局混乱；

2.解决方案：

a、设置父元素高度

b、空div + 清除浮动

c、父元素设置：overflow: hidden;

d、使用自定义伪类，设置给父元素

.clearfix::after {

content: "";

display: table;

clear: both;

}

<style>

.outer {
            border: 1px solid red;
            /* width: auto; */
            /* height: 200px; */

            overflow: hidden;
        }

        .inner {
            width: 200px;
            height: 200px;
            background-color: #bfc;
            float: left;
        }

        /* .help {
           clear: both; 
        } */

        .clearfix::after {
            content: "";
            display: table;
            clear: both;
        }
        
    </style>
</head>
<body>
    <div class="outer clearfix">
        <div class="inner"></div>
        <!-- <div class="help"></div> -->
    </div>

</body>