28. 浮动 float

float 基本用法

float 让元素脱离正常文档流，靠左或靠右排列，其他内容环绕它。

/* 向左浮动 */
.left {
    float: left;
}

/* 向右浮动 */
.right {
    float: right;
}

/* 不浮动（默认） */
.none {
    float: none;
}

值	效果
left	元素靠左浮动，内容环绕右侧
right	元素靠右浮动，内容环绕左侧
none	默认值，不浮动
inherit	继承父级 float 值

文字环绕效果

float 最初的设计目的就是实现报纸式的图文混排。

<img src="photo.jpg" class="float-left">
<p>这是一段很长的文字。文字会自动环绕在图片周围...</p>

.float-left {
    float: left;
    margin-right: 15px;
    margin-bottom: 10px;
}

效果：图片靠左，文字从右侧环绕过去。

浮动实现横向排列

把多个元素都设成 float，它们会横向排列。

.column {
    float: left;
    width: 33.33%;
    padding: 10px;
    box-sizing: border-box;
}

<div class="row">
    <div class="column">第一列</div>
    <div class="column">第二列</div>
    <div class="column">第三列</div>
</div>

效果：三个 div 横向并排显示。

高度塌陷问题

父元素内的子元素全部浮动后，父元素高度变成 0。

/* 父元素 */
.container {
    border: 2px solid red;
    /* 高度为 0，边框变成一条线 */
}

/* 子元素 */
.item {
    float: left;
    width: 100px;
    height: 100px;
    background: lightblue;
}

<div class="container">
    <div class="item">浮动1</div>
    <div class="item">浮动2</div>
</div>

效果：父元素的红色边框缩成一条线，因为浮动子元素不占据父元素高度。

clear 清除浮动

clear 属性让元素避开浮动元素，回到下一行。

/* 左侧不允许有浮动元素 */
.below {
    clear: left;
}

/* 两侧都不允许有浮动元素 */
.below-both {
    clear: both;
}

值	效果
none	默认值，允许两侧有浮动元素
left	左侧不允许浮动元素
right	右侧不允许浮动元素
both	两侧都不允许浮动元素

<div class="float-left">浮动元素</div>
<div class="clear-both">这个元素会换到下面</div>

clearfix 解决高度塌陷

实际开发中，我们通常不在 HTML 里加空标签，而是用伪元素清除浮动。

方法一：overflow 触发 BFC

.clearfix {
    overflow: auto;    /* 或 hidden */
}

原理：overflow 不为 visible 会创建 BFC（块级格式化上下文），BFC 会包裹浮动子元素。

方法二：伪元素 clearfix（推荐）

.clearfix::after {
    content: "";        /* 必须有内容 */
    display: table;     /* 或 block */
    clear: both;        /* 清除两侧浮动 */
}

<div class="container clearfix">
    <div class="item">浮动1</div>
    <div class="item">浮动2</div>
</div>

效果：父元素正确包裹浮动子元素，高度恢复正常。

浮动与 display 的变化

元素设置 float 后，display 属性会发生变化：

/* 原本是 inline 的 span */
span {
    float: left;
    width: 100px;     /* 生效了！ */
    height: 50px;     /* 也生效了！ */
}

浮动元素自动变成类似 block 的行为，可以设置宽高。

浮动的特性总结

1. 脱离文档流：不占据正常空间，父元素感知不到高度
2. 可以设置宽高：无论原来是什么 display 值
3. 横向排列：多个浮动元素会并排显示
4. 内容环绕：内联内容（文字）会绕开浮动元素
5. 遇到边界换行：宽度不够时自动换到下一行

/* 多个浮动元素宽度不够时自动换行 */
.item {
    float: left;
    width: 25%;       /* 一行放 4 个 */
    height: 100px;
}

浮动 vs 现代布局

浮动原本是用来做文字环绕的，后来被滥用来做页面布局。现在有了 Flexbox 和 Grid，布局不再依赖浮动。

但浮动仍有其价值：

• 文字环绕图片：这是 float 的本职工作
• 简单并排：几个元素横向排列
• 兼容性要求：需要支持非常老的浏览器时

/* 文字环绕仍然是 float 的主场 */
.article img {
    float: left;
    margin: 0 15px 10px 0;
    border-radius: 4px;
}

小结

• float 让元素脱离文档流，靠左或靠右排列
• float 最初用于文字环绕图片，后来被用来做布局
• 浮动元素会导致父元素高度塌陷，需要清除浮动
• clear 让元素避开浮动元素，回到下一行
• 伪元素 clearfix 是最推荐的清除浮动方案
• 浮动元素自动变成类似 block 的行为，可以设置宽高