超详细解析浮动（CSS Float）及清除浮动的方法

前言：在Web开发中，样式布局是一个关键的方面，而浮动（float）是其中一个常用的CSS属性，用于实现元素的流动布局。然而，浮动元素可能引发一些布局问题，特别是在其父元素或兄弟元素中。为了解决这些问题，清除浮动的概念和方法应运而生。本文将深入探讨CSS浮动的原理、应用以及详细介绍各种清除浮动的方法。

什么是浮动？

CSS中的浮动是一种布局方式，可以使元素脱离正常文档流，向左或向右漂浮在其父元素中。通常，浮动被用于实现文字环绕图片、多栏布局等设计。它还能让块级元素同行显示，让行内元素可以设置宽高所以浮动在css当中有很大的应用，浮动的设计之初就是用来实现文字环绕效果的。让我们来举例看一下吧

我用了两个简单的div盒子，我们知道盒子是块级元素，块级元素是按文档流上下排序的，不会重叠在一起，但是我用了float浮动的方法，让我们一起来看一下效果吧。

看！！！，就形成这样子的文字环绕图片的效果，而且我可以设置盒子的宽高，说明它不再是一个块级元素了。通过css里面的浮动的方法就可以实现这样字的文字环绕效果，怎么样是不是很炫酷。我们来看一下在实际案例中的应用吧

像阿里巴巴等导航栏那一行就是用浮动将一个个div盒子排成一列的。

浮动的特性

1.脱离文档流

用了浮动之后它会脱离文档流，向上走，不会占据空间

2.文字环绕

使用浮动可以很轻松的达到文字的环绕效果，使页面特别美观

3.可以让块级元素同行显示

一个个的盒子可以排列在一行，就像各大购物平台的导航条一样

4.让行内元素可以设置宽高

用了浮动之后就可以给行内元素设置宽高了

5.浮动元素可以使用margin，但是不能使用margin：0 auto 大厂面试题，可以自己试一下

浮动的属性

在CSS中，我们使用float属性来设置元素的浮动状态。常见的取值有left、right和none，分别表示左浮动、右浮动和取消浮动。例如：

.image {
    float: left;
}

上述代码将使class为image的元素向左浮动。

浮动带来的问题

看到浮动的超能力之后我们是不是觉得浮动很好用，很万能。但是但是，使用浮动的时候也会带来一个巨大的问题，那就是会导致父元素高度塌陷。用浮动之后子元素脱离了文档流，就像一块巧克力，里面的巧克力没了，没东西撑了，那这个巧克力的外壳就会塌陷一样。这样会导致什么后过呢，后面的元素挤进来与子元素重叠。显然这不是我们想要的效果，当然文字环绕除外。

如何解决浮动带来的问题- 清除浮动

直接给父元素设置宽高

这是一个简单粗暴但不优雅的写法。既然父元素高度塌陷，那我们就直接给父元素设置宽高，不用子元素去撑起父容器的高度了。就像将原来风一吹就会变形的糖衣换成了不锈钢的。显然这不属于清除浮动的方法，这种写法只能将父元素的宽高写死了，不优雅不优雅。

一、使用空元素清除浮动

3.1.1 原理介绍

空元素清除浮动的原理是在浮动元素之后插入一个空的块级元素，并设置其clear属性为both。这样做的效果是让该空元素自动换行，跳过浮动元素，使得父元素包含浮动。

3.1.2 具体实现

htmlCopy code
<div class="parent">
    <div class="float-left">浮动元素1</div>
    <div class="float-left">浮动元素2</div>
    <div class="clear"></div>
</div>

cssCopy code
.clear {
    clear: both;
}

二、使用伪元素清除浮动

3.2.1 原理介绍

使用伪元素清除浮动的原理是在浮动元素的父元素上应用伪元素，并设置其content属性为空，display属性为table或block，从而触发BFC（块级格式化上下文），使父元素包含浮动。

3.2.2 具体实现

htmlCopy code
<div class="parent clearfix">
    <div class="float-left">浮动元素1</div>
    <div class="float-left">浮动元素2</div>
</div>

cssCopy code
.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

清除浮动的比较

使用空元素 vs. 使用伪元素

性能比较

使用伪元素清除浮动通常被认为是更现代、更语义化的方法，而且性能更好。因为它不需要在DOM中插入多余的元素，只需通过CSS即可完成浮动的清除。

兼容性比较

使用空元素清除浮动在一些旧版浏览器中可能更兼容，但在现代Web开发中，使用伪元素清除浮动已经成为一种较为推荐的做法。

理解BFC（块级格式化上下文）

在清除浮动的过程中，BFC（块级格式化上下文）扮演了重要的角色。理解BFC对于解决浮动引起的问题至关重要。

什么是BFC？

BFC是指一个独立的渲染区域，规定了内部的块级盒子如何布局，并且与这个区域外部毫不相干。在BFC中，盒子是从包含块的顶端开始，垂直地一个接一个地放置的。

BFC的特性

BFC具有一些特性，其中一些特性对于清除浮动非常有帮助：

边距折叠： BFC内部的垂直边距会发生折叠，这有助于更精确地控制元素之间的间距。
浮动不影响外部： BFC内部的浮动元素不会影响到外部的元素，这有助于避免一些浮动引起的问题。
清除浮动： BFC可以包含浮动的元素，防止浮动元素对外部布局的影响。

如何创建BFC

要创建一个BFC，可以通过以下方式之一：

设置overflow属性为非visible的值，如auto或hidden。
设置float属性为left或right。
将元素设置为position: absolute或fixed。
将元素设置为display: inline-block、table-cell、table-caption等。

BFC与清除浮动的关系

清除浮动的常用方法之一就是触发父元素的BFC特性。通过使父元素成为BFC，可以使其包含浮动元素，防止浮动引起的高度塌陷等问题。这也是使用伪元素清除浮动的原理之一，因为伪元素会触发BFC。

总结

好啦好啦，今天关于浮动和清除浮动就介绍到这里啦！总言之浮动有很强大的功能，可以实现文字环绕和将盒子排列在一行，还可以设置行内的宽高。但是浮动会导致父元素塌陷，解决办法的话有多种，各有各自的特点，bfc也是清除浮动的一种方式和原理。拜啦拜啦，欢迎大家补充和讨论。

超详细搞清楚css的浮动和解决浮动带来的影响- 清除浮动 满满全是干货 想搞清除浮动一篇文章就够啦