css-清除浮动

最新推荐文章于 2023-07-20 17:15:10 发布

戳戳的船长

最新推荐文章于 2023-07-20 17:15:10 发布

阅读量71

点赞数 1

分类专栏： css 文章标签： html css

本文链接：https://blog.csdn.net/qq_45765588/article/details/116223373

版权

css 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

文章目录

一、为什么要清除浮动？
二、清除浮动的本质
三、清除浮动方法

一、为什么要清除浮动？

因为父级盒子在很多情况下，无法给出固定高度（例如：手机页面添加新品），而子盒子浮动不占位置，最后父级盒子高度为0时，就会影响到下面的标准流盒子。

二、清除浮动的本质

本质是清除浮动元素造成的影响
如果父盒子本身有高度，就不需要清除浮动
清除浮动之后，父级就会根据浮动的子盒子自动检测高度（当父盒子有高度之后，就不会影响下面的标准流了）

三、清除浮动方法

语法

选择器{clear:属性值;}

属性值	描述
both	同时清除左右两侧浮动的影响
left	清除左侧浮动的影响
right	清除右侧浮动的影响

方法一：额外标签法（隔墙法）

在浮动元素后面加一个空标签（必须是块级元素）

.clear {
            clear: both;
        }
<div class="clear"></div>

<style>
        .box {
            width: 800px;
            border: 1px solid blue;
            margin: 0 auto;
        }

        .damao {
            float: left;
            width: 300px;
            height: 200px;
            background-color: purple;
        }

        .ermao {
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .footer {
            height: 200px;
            background-color: black;
        }

        .clear {
            clear: both;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="damao">大毛</div>
        <div class="ermao">二毛</div>
        
        <!-- <div class="clear"></div> -->
        <!-- 这个新增的盒子要求必须是块级元素不能是行内元素 -->
        <span class="clear"></span>
    </div>
    <div class="footer"></div>

</body>

方法二：父级添加overflow

将overflow的属性值设置为hidden、auto或scroll
缺点：无法显示溢出部分

.box {
            /* 清除浮动 */
            overflow: hidden;
            width: 800px;
            border: 1px solid blue;
            margin: 0 auto;
        }

<style>
        .box {
            /* 清除浮动 */
            overflow: hidden;
            width: 800px;
            border: 1px solid blue;
            margin: 0 auto;
        }

        .damao {
            float: left;
            width: 300px;
            height: 200px;
            background-color: purple;
        }

        .ermao {
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .footer {
            height: 200px;
            background-color: black;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="damao">大毛</div>
        <div class="ermao">二毛</div>
    </div>
    <div class="footer"></div>

</body>

方法三：:after 伪元素法

额外标签法升级版

优点：结构中无需新增一行，优化了结构，css样式中新加了个盒子

固定代码：

    <style>
        .clearfix:after {
            content: "";
            /* 转换成块内元素 */
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

        .clearfix {
            /* IE6、7 专有 */
            *zoom: 1;
        }

        .box {
            width: 800px;
            border: 1px solid blue;
            margin: 0 auto;
        }

        .damao {
            float: left;
            width: 300px;
            height: 200px;
            background-color: purple;
        }

        .ermao {
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .footer {
            height: 200px;
            background-color: black;
        }
    </style>
</head>

<body>
    <div class="box clearfix">
        <div class="damao">大毛</div>
        <div class="ermao">二毛</div>
    </div>
    <div class="footer"></div>

</body>

方法四：双伪元素清除浮动

即在css样式中前后都加一个盒子

<style>
        /* 前后都加上一个盒子 */
        .clearfix:before,
        .clearfix:after {
            content: "";
            /* 转换为表格 */
            display: table;
        }

        .clearfix:after {
            clear: both;
        }

        .clearfix {
            /* 照顾低版本浏览器 兼容性问题 */
            *zoom: 1;
        }

        .box {
            width: 800px;
            border: 1px solid blue;
            margin: 0 auto;
        }

        .damao {
            float: left;
            width: 300px;
            height: 200px;
            background-color: purple;
        }

        .ermao {
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .footer {
            height: 200px;
            background-color: black;
        }
    </style>
</head>

<body>
    <!-- 多类名 -->
    <div class="box clearfix">
        <div class="damao">大毛</div>
        <div class="ermao">二毛</div>
    </div>
    <div class="footer"></div>

</body>