在HTML搭建网页布局时，如果子元素浮动无法撑开父元素的盒子_设置浮动元素不换行把父元素宽度撑起来-CSDN博客

本文链接：https://blog.csdn.net/nnwnm/article/details/128199311

项目场景：

在HTML搭建网页布局时，如果子元素浮动无法撑开父元素的盒子

问题描述

  <style>
        .top {
            margin: 0 auto;
            width: 1000px;
            /* height: 300px; */
            background-color: pink;
        }

        .bottom {
            height: 100px;
            background-color: green;
        }

        .left {
            float: left;
            width: 200px;
            height: 300px;
            background-color: #ccc;
        }

        .right {
            float: right;
            width: 790px;
            height: 300px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <!-- 父子级标签, 子级浮动, 父级没有高度, 后面的标准流盒子会受影响, 显示到上面的位置 -->
    <div class="top">
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <div class="bottom"></div>
</body>

原因分析：

浮动的元素不占据标准流的位置，当子元素浮动，父元素默认里面没有东西，所以无法撑开父盒子

解决方案：

1.直接给父盒子设置高度显示里面浮动的子盒子

2.额外标签法：

在被浮动影响的父盒子后面添加一个标签clearfix，clearfix标签css内容为里面

clear：both；清除浮动影响

3.单伪元素法：

及用伪元素把clear：both清除浮动代码添加至clearfix标签后面

4.双伪元素法：
.clearfix::before, .clearfix::after {
            content: '';
            display: table;
        }

        /* 真正清除浮动的标签 */
        .clearfix::after {
            /* content: '';
            display: table; */
            clear: both;
        }
清除浮动影响和塌陷问题都能调用