CSS清除float浮动影响-实用三种方式

最新推荐文章于 2024-10-28 10:44:13 发布

RUI_DailyStudy

最新推荐文章于 2024-10-28 10:44:13 发布

阅读量964

点赞数

分类专栏：前端学习文章标签： css html html5 css3

本文链接：https://blog.csdn.net/qq_43131785/article/details/107282911

版权

本文介绍了三种清除浮动影响的方法：1) 结尾处加空div并设置`clear:both`；2) 使用父级div的伪类`:after`和`zoom`；3) 设置父级div的`overflow:hidden`。每种方法都有其优缺点，适用于不同场景。推荐使用定义公共类的方法以减少CSS代码。

摘要由CSDN通过智能技术生成

结尾处加空div标签 clear:both

  <style>

        .left1 {

            width: 200px;

            float: left;

            background-color: yellow;

            padding: 15px;

        }

        .bac {

            background-color: red;

        }

        .con {

            width: 100%;

            height: 400px;

            background-color: blue;        }

        .clearfloat {

            clear: both;

        }

    </style>

<body>

    <header class="left1"></header>

    <section class="left1 bac"></section>

    <!-- 结尾处加空div标签 clear:both -->

    <div class="clearfloat"></div>

    <section class="con"></section>

</body>

原理：添加一个空div，利用css提高的clear:both清除浮动，让父级div