前言

在网页布局中，CSS的浮动属性可以为我们的页面布局带来便利，但同时也可能导致一些布局问题。本文将带您深入了解浮动的起源、特点、对布局的影响、清除浮动的方法以及重要概念BFC容器。

如果我的文章对你有帮助的话还请点个赞和关注鼓励下博主吧😘

浮动的起源

浮动属性最初是设计用来实现文字环绕效果，现在浮动还有非常多的重要应用。实际上 CSS中的浮动是一种定位方式，它使元素脱离正常的文档流，可以向左或向右移动，直到遇到包含块或者另一个浮动元素为止。通过浮动，我们可以使块级元素同行显示，也能让行内元素拥有设置宽高的能力。

浮动元素的特点

浮动元素具有几个独特的特性：

脱离文档流，不占据位置，父容器高度不会计算浮动元素的高度。
可实现文字环绕效果。
允许块级元素同行显示。
能够让行内元素拥有设置宽高的能力。
可以使用margin属性，但不能使用margin： 0 auto进行居中布局。margin:0 auto是让块级元素水平居中,而浮动元素已经脱离了文档流，但是却可以使用margin设置外边距

浮动对于布局带来的影响

浮动元素对布局有重大影响，可能会导致父容器高度塌陷，导致后面元素前移，影响后续元素的布局。这时就需要清除浮动，以确保正确的布局结构。

我们通过一个实例来更好理解:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul li{
           
            width: 200px;
            height: 100px;
            float: left;
            list-style: none;
            
        }
        li:nth-child(1){background-color: #de1a1a;

        }
        li:nth-child(2){background-color: rgb(9, 227, 82);

        }
        li:nth-child(3){background-color: #eaf605;

        }
        .text{
            width: 200px;
            height: 200px;
            background: #0101e0;
            /* clear: both; */
        }
        /* 为父容器直接设置宽高 */
        /* ul{
            height: 200px;
        } */
        /* 伪元素清除浮动  */
         /* .clear::after{
            content: '';
            clear: both;
            display:block;
        } */
        /* 变成BFC容器,BFC容器有时候能消除浮动带来的影响 */
        ul{
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div class="container">
        <ul class="clear">
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
        <div class="text">hello world</div>
    </div>
    
</body>
</html>

运行结果

在上面的代码中我们定义了编号为1、2、3的宽200px高100px的不同颜色的盒子以及一个宽200px高300px的写有helloworld盒子。
我们已经将前面三个盒子设置为浮动，所以它们脱离文档流跑到同一行。
但是注释掉style中最后的ul选择器


/*ul{ overflow: hidden; }*/

看下变化

你会发现helloworld盒子的高度变短了，也就是说明了父容器高度塌陷，导致后面元素前移前面盒子刚好就盖住了helloworld盒子的一半。注释掉的语句其实就是将ul变为BFC容器，我们在后面将会介绍。

清除浮动的几种方法

当不需要浮动属性时该如何清除呢
以下有几种方法已经写在了以上代码的style标签中，可以解除注释一一查看效果

使用clear: both属性直接清除左右浮动或者看需求单独清除单边浮动left或right。
在最后一个浮动元素之后添加新的元素，并对该元素应用清除浮动的样式。
在容器的伪元素 :after 上使用清除浮动。
在受浮动影响的下方容器中应用清除浮动样式。
使用BFC（Block Formatting Context）容器，通过设置 overflow: auto来创建一个新的格式化上下文，从而清除浮动。

在开发中伪元素和BFC容器消除浮动使用得比较多

BFC容器

BFC是块级格式化上下文的缩写，是一种影响布局的重要概念。

它有一些特定的属性可以触发：

float: right 或 left
position: absolute 或 fixed
display: inline-block
display: table-cell（表格布局除了 table-column）
overflow: hidden、auto 或 overlay
弹性盒子（display: flex 或 inline-flex）

BFC容器的特点

BFC容器有以下特点：

在高度计算时，会将浮动元素的高度也考虑在内，解决了父子容器都被设置为浮动时父容器高度塌陷的问题。
用于解决内外margin重叠问题，提供更精准的布局控制。

margin重叠是初学者在设计页面常常会遇到的问题：在设置父容器的margin-top属性时也设置子容器的margin-top属性,子容器并会不会和父容器的顶端间隔设置好的外边距,而这个设置好的间距会与父容器的外边距重叠在一起

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>margin-top重叠</title>
    <style>
        *{
            margin: 0;
        }
        .wrap{
            width: 100%;
            height: 100px;
            background: red;
            margin-top: 100px;
            /* overflow: auto; */
        }
        .box{
            width: 100%;
            height: 50px;
            background: blue;
            margin-top: 50px;
            
        }
    </style>
</head> 
<body>
    <div class="wrap"> 
        <div class="box">

        </div>
    </div>
</body>
</html>

页面效果

以上代码中设置

父容器为background:red ,height:100px, margin-top:100px,子容器background: blue ,height:50px ,margin-top:50px;
按照定义蓝色盒子应该会在红色盒子的底部但是并没有。实际上是因为这个子容器margin-top属性与父容器的margin-top重叠在一起，可以复制源码到浏览器的检查布局查看。

父容器的外边距

子容器的外边距

可以通过设置 BFC容器 解决这个BUG：style标签中给父容器加上overflow: auto; 将父容器设置为BFC容器就可以正常显示了

如图可以看到蓝色的子容器设置好了外间距50px后到了父容器的底部

通过了解浮动的起源、特点、对布局的影响、清除浮动的方法以及BFC容器，您能更好地掌握CSS布局技巧，解决常见的布局问题，使网页设计更加灵活和多样化。