清除浮动的几种方式

本文链接：https://blog.csdn.net/weixin_44838589/article/details/117608435

1、我们先了解为什么要清除浮动

浮动：

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中 （脱离文档流） ，所以文档的普通流中的块框表现得就像浮动框不存在一样。

从下面的例子可以看到，我们使用了float浮动，父元素出现了高度塌陷，我们所说的清除浮动是指清除由于子元素浮动带来父元素高度塌陷的影响。

1、当元素中有部分元素添加了浮动属性
- 元素则不会根据上个div的标签来下移，则会造成元素的重叠

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .alldiv{
      width: 500px; height: 100px;
      background: #6c5ce7;
    }
    .child1{
      width: 50px; height: 50px;
      background: #81ecec;
      /* 浮动元素 脱离文档流 空间释放 */
      float: right;
    }
    .child2{
      width: 100px; height: 50px;
      background: #fab1a0;
      float: right;
    }
    p{
      background: #fdcb6e;
    }
  </style>
</head>
<body>
  <div class="alldiv">
    <div class="child1"></div>
    <div class="child2"></div>
    <p>A元素</p>
  </div>
</body>
</html>

在这里插入图片描述

2、当子元素全都加入了浮动属性，父元素则会产生高度塌陷

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .alldiv1{
            width: 500px;
            background: #6c5ce7;
        }
        .child1{
            width: 50px; height: 50px;
            background: #81ecec;
            float: right;
        }

        .child2{
            width: 100px; height: 50px;
            background: #fab1a0;
            float: right;
        }

    </style>
</head>
<body>
<!--浮动导致的塌陷-->
<div class="alldiv1">
    <div class="child1"></div>
    <div class="child2"></div>
    <div class="clear"></div>
</div>
</body>
</html>

在这里插入图片描述

2、我们该如何清除浮动

1、当元素中有部分元素添加了浮动属性时

我们可以给错位的元素属性添加clear:both;
clear:both;
指定段落的左侧或右侧不允许浮动的元素：
属性值：
left：在左侧不允许浮动元素
right：在右侧不允许浮动元素
both：在左右两侧均不允许浮动元素
none：默认值。允许浮动元素出现在两侧
inherit：规定应该从父元素继承 clear 属性的值

2、当子元素全都加入了浮动属性，父元素则会产生高度塌陷

1、在最后一个子元素后面添加属性clear:both;的空div元素
2、给父元素的伪元素::after添加clear:both;实现

3、给父元素添加overflow: hidden属性

3、总代码

1、当元素中有部分元素添加了浮动属性

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .alldiv{
      width: 500px; height: 100px;
      background: #6c5ce7;
    }
    .child1{
      width: 50px; height: 50px;
      background: #81ecec;
      /* 浮动元素 脱离文档流 空间释放 */
      float: right;
    }
    .child2{
      width: 100px; height: 50px;
      background: #fab1a0;
      float: right;
    }
    p{
      background: #fdcb6e;
      /* 清除浮动 right left both */
      clear: both;
    }
  </style>
</head>
<body>
  <div class="alldiv">
    <div class="child1"></div>
    <div class="child2"></div>
    <p>A元素</p>
  </div>
</body>
</html>

在这里插入图片描述

2、当子元素全都加入了浮动属性，父元素则会产生高度塌陷

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .alldiv1{
            width: 500px;
            background: #6c5ce7;
        }
        .child1{
            width: 50px; height: 50px;
            background: #81ecec;
            float: right;
        }
        .child2{
            width: 100px; height: 50px;
            background: #fab1a0;
            float: right;
        }
        .clear{
            clear: both;
        }

        .alldiv2{
            width: 500px;
            background: #6c5ce7;
        }
        /* 伪元素默认 行元素 */
        .alldiv2::after{
            content: '';
            /* block clear:both才会生效 */
            display: block;
            clear: both;
        }

        .alldiv3{
            width: 500px;
            background: #6c5ce7;
        }
        .alldiv3{
            /* 溢出隐藏 解决浮动塌陷*/
            overflow: hidden;
        }

        /*
        BFC 块级格式化上下文
            1. 触发BFC overflow: hidden
            2. BFC规则去渲染页面: 浮动的元素也参与运算
         */

    </style>
</head>
<body>
<!--浮动导致的塌陷-->
<div class="alldiv1">
    <div class="child1"></div>
    <div class="child2"></div>
    <div class="clear"></div>
</div>

<hr>

<div class="alldiv2">
    <div class="child1"></div>
    <div class="child2"></div>
</div>

<hr>

<div class="alldiv3">
    <div class="child1"></div>
    <div class="child2"></div>
</div>

</body>
</html>

在这里插入图片描述