Web前端入门第 40 问：CSS float 浮动布局应用场景

CSS float 浮动属性最早用于文字环绕图片效果，就像传统报纸上的印刷排版一样。
CSS2 的规范推动了浮动用于其他元素，float 便被大范围应用于布局，当年常说的 div + css 布局，float 绝对占有一席之地，float 用于布局手段便颠覆了再之前的表格布局，如今表格只用于数据展示。
而今 CSS3 推动 flex 弹性盒子和 grid 网格布局规范，float 的地位有点像当年的表格布局一样，有种退出舞台的感觉，但一些简单的布局用 float 比 flex 更简单。而且最初的文字环绕效果，其他的 CSS 属性都不好使，非 float 莫属。
float 应用场景

虽说如今 CSS 的 float 浮动属性在布局领域败北，被 flex 一脚踢在了岸边上，但这一脚还不至死，float 多少还有一口气在~
两列左右布局

还是以经典的左右两端布局为例，看看浮动的用处：

看 left 和 right 两个位置，分别位于左右两侧，使用 float 的实现：

1.   left
2.   right

复制代码

直接将两个元素分别设置 float 即可实现以上布局，但这里埋了一个坑！
父级元素高度塌陷

我们给 .box 的容器添加一个小小的边框属性，看看效果就会发现问题：

1.   left
2.   right

复制代码

显示效果：

父级元素高度没有了，四条边框变成了一条线，这是为何？
原因便是 float 的名字 浮动，float 不只是名字叫浮动，还在于它的作用也是 浮动，让元素飘起来，不在占用空间位置，但是与定位又不一样，float 的元素还受父级控制，但又不占用父级元素空间，所以就造成了高度塌陷，那怎么解决这个问题？？
最简易的做法是给 .box 添加一个 overflow: hidden; 便可以让父级高度恢复：

1.   left
2.   right

复制代码

显示效果：

overflow: hidden; 的问题：
虽然高度塌陷的问题是解决了，但是 overflow: hidden; 也会造成其他问题，比如：如果有内容溢出了容器，就再也看不到了~~
此方法仅适用于没有内容溢出的容器清除浮动。
最佳的清除浮动方法

MDN 的一个小角落里面，有这么一个 CSS 属性 clear，它的名称就是它的作用：清除，对头，就是用来清除浮动的，没其他意思。
用法嘛，它有多个属性值，别想那么多，就用最常见的 both 就行，其他值等要用了再说，扣代码这么多年的前端经历，也没见用上其他值~~
这儿建议用一个伪对象 after，别问为什么，问就是不想再新增一个空的 html 元素用来清除浮动，代码如下：

1. /**清除浮动**/
2. .clearfix:after {
3.   visibility: hidden;
4.   display: block;
5.   font-size: 0;
6.   content: " ";
7.   clear: both;
8.   height: 0;
9. }
10. .clearfix {
11.   *zoom:1;
12. }

复制代码

至于为什么要那么多的代码，嘿嘿...为了兼容各种赖克宝浏览器。百度首页的代码中都还找到有这样的代码，嘿，说明百度还在支持赖克宝浏览器~~
如果不考虑兼容，直接可以这样玩：

1. .clearfix:after {
2.   content: "";
3.   display: block;
4.   clear: both;
5. }

复制代码

用法：

1.   left
2.   right

复制代码

显示效果：

这个 clearfix 类可丢公用样式中，要清除浮动时候，直接加载容器盒子上即可！
美中不足的是，容器 box 伪对象 after 被占用了，其他地方再想使用伪对象就会有冲突！！
改变元素位置

某某天，产品突发奇想，在左边的那个 left 给我放在右边去呗，右边的 right 给放在左边来下吧。
按照懒人思想，我肯定不想再去动 HTML 结构了，看看使用 float 来做到 flex 的 order 排序效果：

1.   left
2.   right

复制代码

注意看代码中的 float: right; 和 float: left; 位置。
仅需要对调一下 float 的位置，即可实现左右互换，而不用改变 HTML 结构！显示效果：

终极应用场景

float 的初衷是用于文字排版，虽说在布局方面，float 干不过 flex 和 grid，但在文字环绕这个场景中，float 还是老大哥。
文字环绕

以上这种文字环绕的效果，如果用 flex 和 grid 来做，不知道要将 HTML 结构拆成啥样，但对于 float 来说就是信手拈来的事儿。
代码：

1.   <p>CSS float 浮动属性最早用于文字环绕图片效果，就像传统报纸上的印刷排版一样。</p>
2.   浮动元素 left
3.   浮动元素 right
4.   <p>CSS2 的规范推动了浮动用于其他元素，float 便被大范围应用于布局，当年常说的 `div + css` 布局，float 绝对占有一席之地，float 用于布局手段便颠覆了再之前的表格布局，如今表格只用于数据展示。</p>

复制代码

几何形状文字环绕

利用 shape-outside 属性，可实现各种几何图形的文字环绕效果：

1.   <p>CSS float 浮动属性最早用于文字环绕图片效果，就像传统报纸上的印刷排版一样。</p>
2.   浮动元素 left
3.   浮动元素 right
4.   <p>CSS2 的规范推动了浮动用于其他元素，float 便被大范围应用于布局，当年常说的 `div + css` 布局，float 绝对占有一席之地，float 用于布局手段便颠覆了再之前的表格布局，如今表格只用于数据展示。</p>

复制代码

以上代码定义了一个 circle 的圆形区域，文字将会围绕这个圆形区域显示，效果：

更多几何图形参考 MDN：https://developer.mozilla.org/zh-CN/docs/Web/CSS/basic-shape
float 新的属性值

float 属性值除了常用的 left、right和none 外，2023 的规范还新增了 inline-start、inline-end 这俩兄弟，他们主要用于处理不同的书写方式，比如有些语言是从右往左的书写模式，float: inline-start; 就会浮动到语言书写开始的地方，看例子：
将 float: left 改成 float: inline-start; 再将 box 的书写方向改为 direction: rtl;，再看效果：

可以看到 inline-start 就是往文字开始的地方浮动，这个值对于不同的书写方向还是有用的。但需注意兼容性，毕竟 2023 年才新增的。
总结

虽说 float 浮动属性很少再用于布局，但在文字环绕排版时，还是需要掏出 float。
技术的发展让曾经的经典布局已经逐渐退出舞台，我们在学习新的方案时，也需要回望一下过去，也许某个需求，这些旧的技术也会重新被摆上案桌。

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！