CSS 浮动 - 绿叶网

在 CSS 中，浮动是一种常用的布局技术。它允许元素脱离正常的文档流，并与其他元素并排放置（比如横向排列）。浮动元素不会占据其父元素的空间，而是会漂浮在父元素中，直到遇到另一个浮动元素或父元素的边缘。

CSS 浮动的语法

在 CSS 中，我们可以使用 float 属性来定义一个元素的浮动效果，也就是左浮动还是右浮动。

语法：

float: 关键字;

说明：

float 属性取值只有 2 个，如下表所示。

float 属性取值
属性值	说明
left	元素向左浮动
right	元素向右浮动

示例：使用 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 多列布局

注意:

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

CSS 浮动的替代方案

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

flex 布局。
grid 布局。

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