清除浮动的四种方法

最新推荐文章于 2024-06-18 20:30:59 发布

wind-hm

最新推荐文章于 2024-06-18 20:30:59 发布

阅读量2.7k

点赞数 1

分类专栏：记录—css 文章标签： css3 css html5 html 前端

本文链接：https://blog.csdn.net/A_home/article/details/121449629

版权

文章目录

前言

浮动的元素会脱离标准流（文档流），浮动的盒子不再保留原先的位置

清除浮动的本质就是清除浮动元素带来的影响，策略——闭合浮动

提示：以下是本篇文章正文内容，下面案例可供参考

为什么要清除浮动？

在实际开发中，一般都不给父盒子设定高度，让子盒子撑开父盒子，

但是不给父盒子高度，子盒子浮动后，父盒子高度就会为0，

则会影响后面的标准流排版，所以就需要清除浮动

一、额外标签法

额外标签法是在浮动元素的末尾添加一个空标签，例如<div>标签

优点：通俗易懂

缺点：添加无意义的标签，代码结构化差

注意：添加的空标签必须是块级元素，不能是行内元素

    <h1>额外标签法</h1>
    <!-- <div class="clear"></div>---额外标签法 -->
    <!-- 这个新增的盒子必须是块级元素，不能是行内元素 -->
    <div class="father1">
        <div class="son1">son</div>
        <div class="daughter1">daughter</div>
        <div class="clear"></div>
    </div>
    <div class="uncle1">uncle</div>

        * {
            margin: 0;
            padding: 0;
            text-align: center;
        }

        /* 第一种-额外标签法 */
        .father1 {
            width: 800px;
            background-color: rgb(67, 72, 84);
            margin: 0 auto;
        }

        .clear {
            clear: both;
        }

        .son1,
        .daughter1 {
            height: 300px;
            width: 360px;
            line-height: 300px;
            float: left;
            background-color: rgb(121, 164, 92);
            margin: 0 20px;

        }

        .uncle1 {
            width: 700px;
            height: 100px;
            line-height: 100px;
            background-color: rgb(100, 58, 126);
            margin: 0 auto;
        }