CSS float 属性 - 绿叶网

CSS float 语法

在 CSS 中，float 属性用于实现元素的浮动布局，实现文字环绕、图片贴边、左右排列等经典布局效果。

语法：

float: 关键字;

说明：

float 的常用取值有 3 种，如下表所示。

float 属性取值
取值	说明
none（默认值）	无浮动
left	左浮动
right	右浮动

对于浮动，小伙伴们要清楚以下几点。

当一个元素浮动时，它会脱离正常的文档流。这意味着它不再影响其兄弟元素的布局，除非这些兄弟元素是文本或行内元素，它们会围绕浮动元素。
浮动元素的高度不会影响其父元素的高度计算（如果父元素的高度是 auto）。这通常需要使用清除浮动（clear 属性）或 BFC 来解决。
块级元素在浮动后，其 display 计算值会变为 block，但其宽度会根据内容自动收缩（除非显式设置了宽度）。
连续的浮动元素会并排排列，直到遇到容器边缘。

CSS float 摘要

属于	CSS 浮动
使用频率	中（传统布局）
是否继承	否
默认值	none
兼容性	查看
官方文档	查看
MDN	查看
相关属性	clear、position

CSS float 示例

接下来，我们通过一个简单的例子来讲解一下 CSS float 属性是如何使用的。

示例：使用 CSS 浮动

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        /* 定义父元素样式 */
        #father {
            width: 300px;
            background-color:teal;
            border: 1px solid silver;
        }
        /* 定义子元素样式 */
        #father div {
            padding: 10px;
            margin: 15px;
        }
        #son1 {
            background-color: hotpink;
            /* 这里设置son1的浮动方式 */
        }
        #son2 {
            background-color: orange;
            /* 这里设置son2的浮动方式 */
        }
    </style>
</head>
<body>
    <div id="father">
        <div id="son1">box1</div>
        <div id="son2">box2</div>
    </div>
</body>
</html>

页面效果如下图所示。

没有设置浮动时效果

分析：

上面例子定义了 3 个 div 块：一个是父块，另外两个是它的子块。为了便于观察，我们为每一个块都加上了背景颜色，并且让块与块之间加上一定的外边距。

从上图可以看出，如果两个子块都没有设置浮动，由于 div 是块元素，此时会各自向右延伸，并且自上而下排列。

1. 设置第 1 个 div 浮动

#son1 {
    background-color: hotpink;
    float: left;
}

页面效果如下图所示。

设置第1个div浮动

分析：

由于 box1 设置为左浮动，box1 变成了浮动元素，因此此时 box1 的宽度不再延伸，而是由内容宽度决定其宽度。接着相邻的下一个 div 元素（box2）就会紧贴着 box1，这是由于浮动引起的效果。

小伙伴们可以尝试将 box1 设置为右浮动，然后看看实际效果如何？

2. 设置第 2 个 div 浮动

#son2 {
    background-color: orange;
    float: left;
}

页面效果如下图所示。

设置2个div浮动

分析：

由于 box2 变成了浮动元素，因此 box2 也跟 box1 一样，宽度不再延伸，而是由内容确定宽度。如果 box2 后面还有其他元素，则其他元素也会紧贴着 box2。

细心的小伙伴估计看出来了，怎么父元素变成一条线了呢？其实这是浮动引起的问题。至于怎么解决，就需要借助 CSS 清除浮动来解决。

我们都知道在正常文档流的情况下，块元素都是独占一行的。如果想要使用两个或者多个块元素并排在同一行，这个时候可以考虑使用浮动，将块元素脱离正常文档流来实现。

浮动可以使得元素移到左边或者右边，并且允许后面的文字或元素环绕着它。浮动最常用于实现水平方向上的并排布局，例如两列布局、多列布局等，如下图所示。

CSS多列布局

在早期的 Web 开发中，浮动是实现两列或多列并排布局的主要手段。虽然现代开发中我们更多使用 Flex 或 Grid，但在维护旧项目或实现特定图文混排效果时，浮动依然很有用。

注意:

浮动元素会使其父元素高度塌陷：由于浮动元素脱离了正常文档流，它们不会被包含在其父元素中，因此父元素的高度可能会塌陷为零。需要清除浮动来解决这个问题。
浮动元素会影响周围元素的布局：浮动元素后面的元素会围绕着浮动元素排列，可能会导致布局混乱。

CSS 浮动的替代方案

在 CSS 中，浮动一种比较传统的布局技术。随着 Web 技术的发展，现在已经出现了完全可以替代 CSS 浮动的技术，常用的有：

CSS flex 布局。
CSS grid 布局。

这 2 种技术使用起来更加简单方便，并且可以创建响应式布局。在实际项目开发中，强烈推荐使用 flex 布局或 grid 布局来替代浮动布局。