【CSS】float 的使用

float 的使用

float 用于指定元素应沿其容器的左侧或右侧放置。

1. 开启浮后，元素会变成行内块元素，即 display: inline-block。
2. float 不会解析标签元素之间的空格。

<div>1div>
<div>2div>
<div>3div>

div {
    float: left; /* 开启浮动 */
    width: 100px;
    height: 100px;
    background-color: rgba(255, 0, 0, 0.5);
}

可以看见 div 从左往右紧密地排列在一起。

2. 如果父级宽度不够，后面的浮动元素会被挤到下一行

<div class="parent">
    <div class="son">div>
    <div class="son">div>
    <div class="son">div>
div>

.parent {
    width: 250px;
    height: 250px;
    background-color: rgba(255, 0, 0, 0.5);
}

.son {
    float: left; /* 开启浮动 */
    width: 100px;
    height: 100px;
    background-color: rgba(0, 0, 255, 0.5);
}

可以看见前俩 div 都排在第一行，第三个 div 因为父级宽度不够而排到了第二行，在第一个 div 的下面。

3. float 元素会被卡住

在上例的基础上添加 CSS：

.son:nth-child(1) {
    margin-top: 10px;
}

可以看见，因为第一个 div 往下移了 10px，所以被 “挤” 到第二行的 div 被卡在了第二个 div 的下面。

4. 如果当前元素的上面是标准流的 block 元素，那么当前元素浮动后 y 轴坐标不变

<div class="default">div>
<div class="float">div>

.default {
    width: 100px;
    height: 100px;
    background-color: red;
}

.float {
    float: right;
    width: 100px;
    height: 100px;
    background-color: blue;
}

可以看见，因为 div.default 是标准流的 block 元素，所以 div.float 浮动在 div.default 的下面，y 轴坐标没有发生改变。

浮动流

float 元素从网页的正常流动（文档流）中移除，但是仍然保持部分的流动性（与绝对定位相反）。

float 元素的可见性

1. 块级元素 “看不见” float 元素。
2. 产生 BFC 的元素、文本都能看见 float 元素。

<div class="float">div>
<div class="default">div>

.float {
    float: left; /* 开启浮动 */
    width: 100px;
    height: 100px;
    background-color: rgba(255, 0, 0, 0.5);
}

.default {
    width: 150px;
    height: 140px;
    background-color: rgba(0, 0, 255, 1);
}

可以看见 div.default 被 div .float 盖住了，证明块级元素 “看不见” float 元素。

为 div.default 设置 overflow: hidden 使其成为 BFC 元素，div.default 就会去到 div .float 的右边，证明文本类元素和 BFC 元素可以 “看见” float 元素。

修改 html 为如下形式：

<div class="float">div>
123

可以看见文本出现在 div .float 的右边，证明文本可以 “看见” float 元素。

容器高度塌陷问题

因为块级元素 “看不见” float 元素，所以 float 子元素无法撑起 block 容器元素的高度。

<div class="wrap">
    <div class="float">div>
    <div class="float">div>
    <div class="float">div>
div>

.wrap {
    background-color: rgba(255, 0, 0, 0.5);
}

.float {
    float: left;
    width: 100px;
    height: 100px;
    background-color: rgba(0, 0, 255, 0.5);
}

可以看见，div.wrap 的高度为 0。

此时可以将 block 容器元素设置为 BFC 元素，block 容器元素就能 “看见” float 元素啦：

.wrap {
    background-color: rgba(255, 0, 0, 0.5);
    overflow: hidden;
}

清除浮动

clear 指定元素是否允许浮动元素在其两侧浮动。

常见的 clear 属性值包括：

1. none：默认值，表示元素允许浮动元素在其两侧浮动。
2. left：元素不允许左侧有浮动元素。
3. right：元素不允许右侧有浮动元素。
4. both：元素不允许左右两侧有浮动元素。
5. inherit：继承父元素的 clear 属性值。

注意：

• clear 属性仅适用于块级元素，对于行内元素是无效的。
• clear 属性只对之前的浮动元素生效，对之后的浮动元素无影响。

<div class="float">div>
<div class="default">div>

.default {
    background-color: rgba(255, 0, 0, 1);
    height: 50px;
    width: 50px;
    /* clear: left; */
}

.float {
    float: left;
    width: 100px;
    height: 100px;
    background-color: rgba(0, 0, 255, 0.5);
}

可以看见，div.default 被 div.float 盖住了。把注释打开，给 .default 设置 clear: left，可以看到 div.default 去了 div.float 的下面。