清除浮动

最新推荐文章于 2024-10-12 22:37:25 发布

所追寻的风

最新推荐文章于 2024-10-12 22:37:25 发布

阅读量126

点赞数 1

分类专栏：前端文章标签： html5 css3

本文链接：https://blog.csdn.net/the_Discovery/article/details/107521851

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

在使用浮动流时，通常需要使用标准流父块作为浮动子块的活动范围。当标准流父块上的所有标签均为浮动标签，并且父块没有设定固定的高度时，就会发生父块高度塌陷，如下图所示。我们需要通过清除浮动来实现下下图效果。

在这里插入图片描述

未清除浮动的代码为：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清除浮动</title>
    <style>
        .father {
            border: 5px solid skyblue;
            width: 800px;
            /* 父元素未设置height */
        }
        
        .child_1 {
            float: left;
            width: 50px;
            height: 50px;
            background-color: #f00;
        }
        
        .child_2 {
            float: left;
            width: 60px;
            height: 70px;
            background-color: #0f0;
        }
        
        .child_3 {
            float: left;
            width: 50px;
            height: 60px;
            background-color: #00f;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="child_1">child_1</div>
        <div class="child_2">child_2</div>
        <div class="child_3">child_3</div>
    </div>
</body>
</html>

1. 额外标签法

在最后一个子浮动元素后追加一个清除浮动标签。

    <div class="father">
        <div class="child_1">child_1</div>
        <div class="child_2">child_2</div>
        <div class="child_3">child_3</div>
        <div class="clear"></div>
    </div>

其相应的样式clear。

        .clear {
            clear: both;
        }

2. 父级添加overflow

给父级的css样式添加overflow

        .father {
            overflow: hidden;
            border: 5px solid skyblue;
            width: 800px;
            /* 父元素未设置height */
        }

3. :after伪元素法

给父元素增加样式clearfix

        .clearfix:after {
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }
        
        .clearfix {
            /* 为了兼容IE6、7 */
            *zoom: 1;
        }

父级使用多个类

    <div class="father clearfix">

4. 双尾元素清除浮动

给父元素增加样式clearfix

        .clearfix:before,
        .clearfix:after {
            content: "";
            display: table;
        }
        .clearfix:after {
            clear: both;
        }
        .clearfix {
            /* 为了兼容IE6、7 */
            *zoom: 1;
        }