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

原创已于 2022-12-16 08:05:41 修改 · 691 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css3

于 2022-12-06 15:06:41 首次发布

前端学习专栏收录该内容

4 篇文章

订阅专栏

本文介绍了解决HTML布局中子元素浮动导致父元素高度无法正常撑开的问题。通过直接设置父元素高度、额外标签法、单伪元素法及双伪元素法等方法清除浮动影响，确保页面布局正确。

项目场景：

在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;
        }
清除浮动影响和塌陷问题都能调用