浮动、清除浮动和BFC是前端开发中常见的概念，它们对于页面布局及美化至关重要。让我们一起来了解这些内容，并学习如何运用它们来创建漂亮的网页吧。

浮动

在网页设计中，浮动是一种常见的布局技术，可以让元素脱离文档流，我们来看看它有什么作用吧！

使文字环绕

代码示例如下：

html结构：

ini 复制代码

<div class="box"></div>
<div class="text">一段文字</div>

css样式：

css 复制代码

 .box{
        width: 200px;
        height: 200px;
        background-color: coral;
    }

若不加浮动，则页面是这样的效果：

但若是在box加上float: left;(向左浮动)，则能使文字环绕box这个盒子：

css 复制代码

 .box{
        width: 200px;
        height: 200px;
        background-color: coral;
        float: left;
    }

让块级元素同行显示

块级元素本身是占据一整行的，但浮动能让多个块级元素处于同一行，示例如下：

若不加浮动，则多个块级元素各自占据一行：

html结构：

css 复制代码

 <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
 </ul>

css样式：

css 复制代码

    *{
        margin: 0;
        padding: 0;
    } 
    ul li{
        list-style:none;
        width: 200px;
        height: 100px;
        font-size: 16px;
    }
    li:nth-child(1){/*子容器选择器   */
        background-color: rgb(227, 149, 149);
    }
    li:nth-child(2){
        background-color: rgb(205, 139, 197);
    }
    li:nth-child(3){
        background-color: rgb(145, 212, 227);
    }

页面如图：

但若是给li加上浮动属性：

css 复制代码

    ul li{
        list-style:none;
        width: 200px;
        height: 100px;
        font-size: 16px;
        float: left;
    }

则各个li到同一行去了：

让行内元素可以设置宽高

span为行内元素，它不能直接设置宽高，就算给它设置宽高，它也不会变，为了看的更明显，我们给它设置一个边框：

html结构：

css 复制代码

<div>
    <span>1</span>
    <span>2</span>
    <span>3</span>
</div>

css样式：

css 复制代码

    span{
        width: 200px;
        height: 100px;
        border: 1px solid #000;
    }

页面如下：

但若是加上浮动属性，则设置的宽高会变为有效：

css 复制代码

    span{
        width: 200px;
        height: 100px;
        border: 1px solid #000;
        float: left;
    }

浮动元素可以使用margin，但是不能使用margin: 0 auto;

margin用来设置页边距，而margin: 0 auto;可以使块级元素居中。加了浮动属性的元素能用margin来设置页边距，但margin: 0 auto;对它是无效的。

清除浮动

尽管浮动能够带来美观的页面布局，但有时也会带来一些问题，比如父容器高度塌陷等。因此，我们知道了如何使用浮动，也需要学会如何清除浮动。

给父容器设置高度

我们看以下代码示例：

html结构：

xml 复制代码

 <ul >
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <!-- <div class="clear"></div> class="clear"-->
</ul>
<div class="content"></div>

css样式：

css 复制代码

    *{
        margin: 0;
        padding: 0;
    }
    ul li{
        list-style:none;
        width: 200px;
        height: 100px;
        background-color: #c58585;
        float: left;
    }
    .content{
        width: 100%;
        height: 200px;
        background-color: rgb(87, 179, 182);
    }

使li浮动后，li会脱离文档流，导致别的元素出现在它下面：

但要清除它浮动带来的这种影响，我们可以用给它父容器设置一个高度来实现，在css中给ul加上高度：

css 复制代码

    ul{
        height: 100px;
    }

增加一个子容器，在子容器身上清除浮动

若我们增加一个子容器，在子容器身上清除浮动，也可以消除浮动带来的不好的影响，同样用上一个例子：

增加一个子容器：

css 复制代码

 <ul >
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <div class="clear"></div> 
</ul>

在css中清除子容器的浮动：

arduino 复制代码

  .clear{
        clear: left; 
  }

也可以实现同样的效果：

借助伪元素 after 来清除

还是这个例子，给ul加上clear类：

css 复制代码

<ul class="clear">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

在css中设置伪元素after：

css 复制代码

.clear::after{
    content: '';
    clear:left;
    display: block;
}

最后的页面也是一样的效果。

还有一个方法可以清除浮动，那就是利用BFC，BFC容器可以清除浮动。

BFC(Block Formatting Context--块级格式化上下文)

BFC 是块级格式化上下文的缩写，它是一种特殊的渲染区域，具有独立的布局规则。创建 BFC 可以解决一些常见的布局问题，比如外边距重叠等。

如何创建BFC？给容器设置以下属性能成为BFC容器：
1. 浮动：float: left | right
2. 定位：position: absolute | fixed
3. 行内块：display: inline-block
4. 表格单元：display: table-cell | table-XXX
5. overflow: auto | hidden | scroll
6. 弹性格子：display: flex | inline-flex

BFC的特征

BFC的效果是让处于BFC内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。

内部盒子也会按照文档流的顺序排列
bfc容器在计算高度时，会将内部浮动的子元素的高度也计算在内
解决外边距重叠的问题

轻松搞定CSS布局：新手必读的浮动、清除浮动和BFC指南

浮动

清除浮动

BFC(Block Formatting Context--块级格式化上下文)

BFC的特征