css-清除浮动

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

戳戳的船长

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

阅读量86

点赞数 1

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

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

版权

本文介绍了清除浮动的原因，浮动元素导致父级盒子高度为0的问题，并详细阐述了四种清除浮动的方法：额外标签法、父级添加overflow、:after伪元素法和双伪元素清除浮动。这些方法旨在解决浮动元素对页面布局的影响。

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

文章目录

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

一、为什么要清除浮动？

因为父级盒子在很多情况下，无法给出固定高度（例如：手机页面添加新品），而子盒子浮动不占位置，最后父级盒子高度为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