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 的实现：

<div class="box">
  <div class="left">left</div>
  <div class="right">right</div>
</div>
<style>
  .box {  
    margin: 20px 0;
    width: 400px;
  }
  .left {
    float: left;
  }
  .right {
    float: right;
  }
</style>

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

父级元素高度塌陷

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

<div class="box">
  <div class="left">left</div>
  <div class="right">right</div>
</div>
<style>
  .box {  
    margin: 20px 0;
    width: 400px;
    border: 2px solid rgba(255, 71, 87,0.3);
  }
  .left {
    float: left;
  }
  .right {
    float: right;
  }
</style>

显示效果：

父级元素高度没有了，四条边框变成了一条线，这是为何？

原因便是 float 的名字 浮动，float 不只是名字叫浮动，还在于它的作用也是 浮动，让元素飘起来，不在占用空间位置，但是与定位又不一样，float 的元素还受父级控制，但又不占用父级元素空间，所以就造成了高度塌陷，那怎么解决这个问题？？

最简易的做法是给 .box 添加一个 overflow: hidden; 便可以让父级高度恢复：

<div class="box">
  <div class="left">left</div>
  <div class="right">right</div>
</div>
<style>
  .box {  
    margin: 20px 0;
    width: 400px;
    border: 2px solid rgba(255, 71, 87,0.3);
    overflow: hidden;
  }
  .left {
    float: left;
  }
  .right {
    float: right;
  }
</style>

显示效果：

overflow: hidden; 的问题：

虽然高度塌陷的问题是解决了，但是 overflow: hidden; 也会造成其他问题，比如：如果有内容溢出了容器，就再也看不到了~~

此方法仅适用于没有内容溢出的容器清除浮动。

最佳的清除浮动方法

MDN 的一个小角落里面，有这么一个 CSS 属性 clear，它的名称就是它的作用：清除，对头，就是用来清除浮动的，没其他意思。

用法嘛，它有多个属性值，别想那么多，就用最常见的 both 就行，其他值等要用了再说，扣代码这么多年的前端经历，也没见用上其他值~~

这儿建议用一个伪对象 after，别问为什么，问就是不想再新增一个空的 html 元素用来清除浮动，代码如下：

/**清除浮动**/
.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}
.clearfix {
  *zoom:1;
}

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

如果不考虑兼容，直接可以这样玩：

.clearfix:after {
  content: "";
  display: block;
  clear: both;
}

用法：

<div class="box clearfix">
  <div class="left">left</div>
  <div class="right">right</div>
</div>
<style>
  .clearfix:after {
    content: "";
    display: block;
    clear: both;
  }
  .box {  
    border: 2px solid rgba(255, 71, 87,0.3);
    margin: 20px 0;
    width: 400px;
  }
  .left {
    float: left;
  }
  .right {
    float: right;
  }
</style>

显示效果：

这个 clearfix 类可丢公用样式中，要清除浮动时候，直接加载容器盒子上即可！

美中不足的是，容器 box 伪对象 after 被占用了，其他地方再想使用伪对象就会有冲突！！

改变元素位置

某某天，产品突发奇想，在左边的那个 left 给我放在右边去呗，右边的 right 给放在左边来下吧。

按照懒人思想，我肯定不想再去动 HTML 结构了，看看使用 float 来做到 flex 的 order 排序效果：

<div class="box clearfix">
  <div class="left">left</div>
  <div class="right">right</div>
</div>
<style>
  .clearfix:after {
    content: "";
    display: block;
    clear: both;
  }
  .box {  
    border: 2px solid rgba(255, 71, 87,0.3);
    margin: 20px 0;
    width: 400px;
  }
  .left {
    float: right;
  }
  .right {
    float: left;
  }
</style>

注意看代码中的 float: right; 和 float: left; 位置。

仅需要对调一下 float 的位置，即可实现左右互换，而不用改变 HTML 结构！显示效果：

终极应用场景

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

文字环绕

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

代码：

<div class="box">
  <p>CSS float 浮动属性最早用于文字环绕图片效果，就像传统报纸上的印刷排版一样。</p>
  <div class="left">浮动元素 left</div>
  <div class="right">浮动元素 right</div>
  <p>CSS2 的规范推动了浮动用于其他元素，float 便被大范围应用于布局，当年常说的 `div + css` 布局，float 绝对占有一席之地，float 用于布局手段便颠覆了再之前的表格布局，如今表格只用于数据展示。</p>
</div>
<style>
.box {  
  border: 2px solid rgba(255, 71, 87,0.3);
  margin: 20px 0;
  padding: 20px;
  width: 400px;
}
.left,
.right {
  width: 80px;
  height: 80px;
  background-color: #000736;
  color: #fff;
  border: 2px solid #ff4757;
}
.left {
  float: left;
  margin: 10px 10px 10px 0;
}
.right {
  float: right;
  margin: 10px 0 10px 10px;
}
</style>

几何形状文字环绕

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

<div class="box">
  <p>CSS float 浮动属性最早用于文字环绕图片效果，就像传统报纸上的印刷排版一样。</p>
  <div class="left">浮动元素 left</div>
  <div class="right">浮动元素 right</div>
  <p>CSS2 的规范推动了浮动用于其他元素，float 便被大范围应用于布局，当年常说的 `div + css` 布局，float 绝对占有一席之地，float 用于布局手段便颠覆了再之前的表格布局，如今表格只用于数据展示。</p>
</div>
<style>
.box {  
  border: 2px solid rgba(255, 71, 87,0.3);
  margin: 20px 0;
  padding: 20px;
  width: 400px;
}
.left,
.right {
  width: 80px;
  height: 80px;
  background-color: #000736;
  color: #fff;
  border: 2px solid #ff4757;
  border-radius: 50%;
  shape-outside: circle(50%); /* 定义圆形环绕区域 */
}
.left {
  float: left;
  margin: 10px 10px 10px 0;
}
.right {
  float: right;
  margin: 10px 0 10px 10px;
}
</style>

以上代码定义了一个 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。

技术的发展让曾经的经典布局已经逐渐退出舞台，我们在学习新的方案时，也需要回望一下过去，也许某个需求，这些旧的技术也会重新被摆上案桌。