CSS 浮动布局：从浮动到 BFC

柚yuzumi
0 阅读3分钟

一、文档流

浏览器在渲染页面时，遵照从上往下、从左往右的顺序，依次排列，这种页面的排版方式就是文档流。

二、浮动布局

1. 什么是浮动布局

在 CSS 中，浮动（float）属性的出现是为了实现浮动元素周围文字环绕的效果。在网页设计中，如图中所示，应用了 float 属性的页面元素就像印刷布局里面被文字包围的图片一样。

    img {
        float: left;    /* 图片向左浮动 */
    }

image.png

2. 浮动的两大用途

(1) 实现文字环绕

如上，图片向左浮动后，文字会在图片右侧排列，超过图片高度后恢复正常排列。

浮动元素会脱离正常文档流，但仍会影响文字排版，让文字围绕它排列。

(2) 实现元素水平排列

给多个子元素设置 float: left;，就可以让它们从左向右并排排列，空间不足时换行。


```css
.item {
    width: 200px;
    height: 100px;
    float: left;
    font-size: 16px;
}

常用值有 left、right 和 none。top、bottom 是无效值，对应声明会被浏览器忽略。

image.png

3. 如何清除浮动的副作用

当普通父容器没有设置高度，内部子元素又全部浮动时，子元素无法撑起父容器，导致高度塌陷，进而影响后续元素的排版。

image.png

常见的处理方式有以下五种，按需选择即可：

(1) 直接给父容器设置高度 —— 不推荐

/* 解法一：直接给父容器设置高度 */
ul {
    height: 100px;   
}

太死板了，当子元素换行或高度变化后，固定高度就可能不够用。

(2) 在浮动元素末尾增加空容器 —— 不推荐

在父容器内部、所有浮动元素之后，添加一个空的块级元素：

解法二 */
/* .clear{
    clear: both;
}

<div style="clear: both;"></div>

clear: both; 让它排到前面左右浮动元素的下方，从而撑起父容器，但会增加无意义的标签。

(3) 为父容器设置 after 伪元素 —— 推荐

/* 解法三 */
ul::after {
    content: "";
    display: block;
    clear: both;
}

原理与空容器相同，用伪元素代替真实标签，不需要修改 HTML 结构。

(4) 给被影响的后续元素设置 clear —— 不推荐

h2 {
    clear: both;
}

可以让后续标题避开浮动，但不能解决前面父容器的高度塌陷。

(5) 为父容器设置 overflow: hidden —— 最推荐

.list {
    overflow: hidden;
}

通过创建 BFC，利用BFC容器的"它内部的子元素不会影响外部"特性，让父容器计算高度时包含浮动子元素。

image.png 以上方法如图中所示均解决了图中高度塌陷的问题

三、BFC容器

1. 什么是BFC容器

BFC（Block Formatting Context），即块级格式化上下文，可以理解为一个拥有独立排版规则的区域。

例如，父子元素的 margin-top 在满足合并条件时，不会相加，而是发生外边距合并：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .parent{
            height: 500px;
            background-color: #4821d2;
            margin-top: 100px;
        }
        .child{
            height: 200px;
            background-color: #dc1c62;
            margin-top: 50px;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>
</html>

image.png

当 .child 是第一个正常流子元素，父容器没有上边框、上内边距等阻隔时，这两个正外边距会合并为 100px，子元素不会在父容器内部留出 50px 的顶部间距。

给父容器设置 overflow: hidden; 或 display: flow-root;，创建 BFC 后，就可以阻止这里的父子外边距合并。

2. BFC容器的渲染规则

  1. BFC容器内部的子元素也是从上往下，从左往右排列
  2. BFC容器是一个独立的拥有特殊渲染规则的容器，它内部的子元素不会影响外部
  3. BFC容器在计算高度的时候，会将浮动的子元素的高度 也计算在内

3. 如何创建BFC容器

常见方式：

  1. display: flow-root; —— 直接创建 BFC。
  2. overflow: hidden || auto || overlay || scroll;
  3. position: absolute || fixed;
  4. float: left || right;
  5. display: flex || grid || inline-xxxx;
avatar
文章
阅读
粉丝