CSS清除float浮动影响-实用三种方式_css float 元素不受影响-CSDN博客

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

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

结尾处加空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能自动获取到高度。因为该属性的作用是清除浮动对该元素的影响，也就是同级div浮动之后导致浮动元素脱离文档流而使未浮动元素上移，在页面中的显示效果就为浮动元素将未浮动元素遮住，清除之后该未浮动元素就会放置于浮动元素的下方，也就是可以像文档流时的布局效果，但又因为此未浮动元素没有宽高等属性，所以父元素的高度就会基于此元素的上边框计算，也就相当于文档流中的自适应高度。

优点：简单、代码少、浏览器支持好、不容易出现怪问题

缺点：不少初学者不理解原理；如果页面浮动布局多，就要增加很多空div，让人感觉很不好。

父级div定义伪类:after 和 zoom

<style>

        .left1 {

            width: 200px;

            float: left;

            background-color: yellow;

            padding: 15px;

        }

        .bac {

            background-color: red;

        }

        .con {

            width: 100%;

            height: 400px;

            background-color: blue;

        }

        .row:after {

            content: "";

            clear: both;

            display: block;

        }

    </style>

<body>

    <div class="row">

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

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

    </div>

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

</body>

原理：元素生成伪类的作用和效果相当于方法2中的原理，但是IE8以上和非IE浏览器才支持:after，zoom(IE转有属性)可解决ie6,ie7浮动问题

优点：浏览器支持好、不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等）

缺点：代码多、不少初学者不理解原理，要两句代码结合使用才能让主流浏览器都支持。

建议：推荐使用，建议定义公共类，以减少CSS代码。

父级div定义 overflow:hidden

 <style>

        .left1 {

            width: 200px;

            float: left;

            background-color: yellow;

            padding: 15px;

        }

        .bac {

            background-color: red;

        }

        .con {

            width: 100%;

            height: 400px;

            background-color: blue;

        }

        .row1 {

            overflow: hidden;

        }

</style>

<body>

    <div class="row1">

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

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

    </div>

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

</body>

原理：overflow:hidden 的意思是超出的部分要裁切隐藏掉，那么如果 float 的元素不占普通流位置，普通流的包含块要根据内容高度裁切隐藏如果高度是默认值auto那么不计算其内浮动元素高度就裁切就有可能会裁掉float。这是反布局常识的。所以如果没有明确设定容器高度情况下它要计算内容全部高度才能确定在什么位置hidden浮动的高度就要被计算进去顺带达成了清理浮动的目标

优点：简单、代码少、浏览器支持好

缺点：不能和position配合使用，因为超出的尺寸的会被隐藏。

建议：只推荐没有使用position或对overflow:hidden理解比较深的朋友使用。