CSS 元素浮动

float 属性可以指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。

float 属性最初只用于在一段文本内浮动图像, 实现文字环绕的效果。

但是早期的 CSS 标准中并没有提供好的左右布局方案, 因此在一段时间里面它成为网页多列布局的最常用工具。

提示

绝对定位、浮动都会让元素脱离标准流，以达到灵活布局的效果

float 属性的取值有以下几种：

• none：默认值，元素不浮动
• left：元素向左浮动
• right：元素向右浮动

高度塌陷

浮动元素会脱离文档流，导致父元素的高度塌陷，所以不再向父元素汇报高度。

父元素计算总高度时，就不会计算浮动子元素的高度，导致了高度坍塌的问题。

解决父元素高度坍塌问题的过程，一般叫做清浮动（清理浮动、清除浮动）。

清除浮动目的

让父元素计算总高度的时候，把浮动子元素的高度算进去

清除浮动的方法

添加块级子元素

clear 属性可以指定一个元素是否必须移动(清除浮动后)到在它之前的浮动元素下面。

它的值有以下几种：

• none：默认值，允许元素旁边有浮动元素
• left：要求元素的顶部低于之前生成的所有左浮动元素的底部
• right：要求元素的顶部低于之前生成的所有右浮动元素的底部
• both：要求元素的顶部低于之前生成的所有浮动元素的底部

<style>
  .item {
    float: left; /* 脱离文档流 */
  }
  .clearfix {
    clear: both; /* 清除浮动 */
  }
</style>

<div class="item">1</div>
<div class="item">2</div>
<div class="clearfix"></div>
<div class="item3">3</div>

父元素添加::after 伪元素

<style>
  .item {
    float: left;
  }
  .clearfix {
    zoom: 1; /* 兼容IE6/7 */
  }
  .clearfix::after {
    content: "";
    display: block;
    clear: both; /* 清除浮动 */

    visibility: hidden; /* 浏览器兼容 */
    height: 0; /* 浏览器兼容 */
  }
</style>

<div class="clearfix">
  <div class="item">1</div>
  <div class="item">2</div>
</div>
<div class="item3">3</div>

常见规则

1. 脱离文档流

浮动元素会脱离文档流，不占据文档流中的位置。

浮动元素会尽可能向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

<style>
  .item1 {
    float: left; /* 脱离文档流 */
    background-color: bisque;
  }
  .item2 {
    float: right; /* 脱离文档流 */
    background-color: brown;
  }
</style>

<div class="item1">1</div>
<div class="item2">2</div>

提示

定位元素会层叠在浮动元素上面。

2. 浮动元素边界

如果元素是向左（右）浮动，浮动元素的左（右）边界不能超出包含块的左（右）边界。

如下方示例中，.item1、.item2 元素向左/右浮动，它的左/右边界不能超出 .box 元素的左/右边界。

<style>
  .box {
    width: 200px;
    height: 200px;
    margin: 0 auto;
  }
  .item1 {
    float: left; /* 脱离文档流 */
    background-color: bisque;
  }
  .item2 {
    float: right; /* 脱离文档流 */
    background-color: brown;
  }
</style>

<div class="box">
  <div class="item1">1</div>
  <div class="item2">2</div>
</div>

3. 浮动元素不能层叠

如果一个元素浮动，另一个浮动元素已经在那个位置了，后浮动的元素将紧贴着前一个浮动元素（左浮找左浮，右浮找右浮）。

如果水平方向剩余的空间不够显示浮动元素，浮动元素将向下移动，直到有充足的空间为止。

<style>
  .item {
    width: 100px;
    height: 100px;
    background-color: red;
    float: left; /* 向左浮动 */
  }
</style>

<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>

4. 浮动元素不能与内容层叠

浮动元素不能与行内级内容层叠，行内级内容将会被浮动元素推出来。

比如行内级元素、inline-block 元素、块级元素的文字内容。

<style>
  .box {
    width: 500px;
    background-color: orange;
  }
  .box img {
    width: 300px;
    float: left;
  }
</style>

<div class="box">
  <img src="./images/kobe01.jpg" alt="" />
  <p>
    1978年8月23日，科比·布莱恩特出生于美国宾夕法尼亚州费城。3岁时，科比开始打球，在他成长中最喜欢的球队是湖人队。6岁时，科比随父亲前往意大利生活。1991年，科比一家搬回了美国。
  </p>
  <p>
    科比·布莱恩特（Kobe
    Bryant，1978年8月23日—2020年1月26日），全名科比·比恩·布莱恩特·考克斯（Kobe
    Bean Bryant
    Cox），出生于美国宾夕法尼亚州费城，美国已故篮球运动员，司职得分后卫/小前锋。
  </p>
</div>

5. 浮动元素顶部对齐

行内级元素、inline-block 元素浮动后，其顶部将与所在行的顶部对齐。

应用场景

1. 分页器

2. 多列布局 1

在电商网站中常用到多列布局展示商品列表。

3. 多列布局 2

4. 浮动边框

水平排列的元素需要一个边框，但是边框不能与元素重叠。