浅谈浮动以及三种常用清除浮动的方法

这是我参与11月更文挑战的第2天，活动详情查看：2021最后一次更文挑战

大家好，我是一碗周，一个不想被喝(内卷)的前端。如果写的文章有幸可以得到你的青睐，万分有幸~

这是【从头学前端】系列文章的第三十一篇-《浮动》

本系列文章在掘金首发，编写不易转载请获得允许

本篇文章将来学习CSS中的浮动，本篇文章的内容大纲如下：

CSS中的浮动，指的是float属性，float的诞生之初并不是为了完成某种高级的布局，而是为了完成一个简单的文字环绕。

float属性官方给的定义是指定某一个元素沿着其容器的左侧或右侧放置，允许文本和内联元素环绕它。为元素设置该元素后，元素会脱离文档流。

注：关于脱离文档流的内容，将会在下一篇文章《定位》中做解释。

CSS中提供的float的属性，其常用你的属性值主要有三个：

left：元素向左浮动

right：元素向右浮动

none：元素不进行浮动

注：开启浮动的元素称之为浮动元素

示例代码如下所示：

代码运行结果如下图所示：

开启浮动的元素会具有两个基本特性 ：

包裹性：所谓的包裹性就是指元素的宽度会收缩到与内容一致。

破坏性：所谓的破坏性指的就是父元素的高度塌陷

要掌握什么是清除浮动首先我们需要了解为什么要清除浮动，是因为浮动元素具有其破坏性，导致父元素的高度塌陷 ，所以需要清除浮动来解决高度塌陷。

清除浮动有以下几个方式：

在浮动元素后使用一个空元素如 ，并在CSS中赋予.clear{clear:both;}属性即可清理浮动。亦可使用或来进行清除。

示例代码如下所示：

使用该方法的优点是简单，代码少，浏览器兼容性好；缺点是需要添加大量无语义的HTML元素，代码不够优雅，后期不容易维护。

为浮动元素的容器元素添加overflow:hidden;或overflow:auto;可以达到清除浮动的效果。

示例代码如下：

该方法的优点是简单，代码少，浏览器支持好；缺点是不适用于高度固定的盒子，内容超出时会被隐藏。

使用CSS的:after伪元素清除浮动伪元素是一种固定的写法，具体如下所示：

使用该方法的优点是浏览器支持好，不容易出现怪问题；缺点是代码量偏多。

在实际开发中推荐使用该方式，可以设置一个公共类，在使用的时候直接引入，可以减少CSS的代码。

{完}

你如果看到这里，我感到很荣幸，如果你喜欢这篇文章，你可以为这篇文章点上一个小赞；你如果喜欢这个专栏，我会一直更新到百篇以上，可以点一下后面的链接从头学前端 - 一碗周的专栏 - 掘金 (juejin.cn)进入之后给个关注。

最后也可以给我点个关注，万分荣庆。

往期推荐