Kaiven的个人博客

Appearance

浮动布局 ​

概念 ​

很早之前的一种页面布局方式，时代不一样嘛，虽然现在很少使用了，因为有了更好的布局方式。但是，“文字环绕图片”的效果，使用浮动来实现，才是最优解，而且浮动设计的初衷就是为了实现这样的效果。

父元素高度塌陷问题 ​

代码示例 ​

html
<!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>
        * {
            padding: 0;
            margin: 0;
        }
        .container {
            max-width: 1080px;
            min-width: 360px;
            background-color: skyblue;
            margin: 0 auto;
        }
        .item {
            width: 50%;
            height: 50px;
            float: left;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>这是标题</h1>
        <div class="item">item01</div>
        <div class="item">item02</div>
        <div class="item">item03</div>
        <div class="item">item04</div>
    </div>
</body>
</html>

问题剖析 ​

container 容器的高度由内容决定，按道理来说，蓝色的背景不应该值包含 h1 标签所在的部分。主要是因为浮动的元素，它脱离了普通的文档流，计算容器的高度时，并不会包含容器内的浮动元素，这就说浮动带来的”父元素高度塌陷问题“。

解决办法 ​

清除浮动，恢复到原来的文档流。

html
<div class="clear">
    <div class="item">item01</div>
    <div class="item">item02</div>
    <div class="item">item03</div>
    <div class="item">item04</div>
</div>

.clear::after {
    display: block;
    content: "";
    clear: both;
}

注意：要给包含浮动的元素清除浮动，而不是浮动元素本身

浮动元素的对齐问题 ​

代码示例 ​

html
<!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>
        * {
            padding: 0;
            margin: 0;
        }
        .container {
            max-width: 1080px;
            margin: 0 auto;
        }
        .container div {
            float: left;
            width: 50%;
            background-color: green;
        }
        .item01 {
            height: 80px;
        }
        .item02 {
            height: 75px;
        }
        .item03 {
            height: 100px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item01">01</div>
        <div class="item02">02</div>
        <div class="item03">03</div>
    </div>
</body>
</html>

问题剖析 ​

这也是一个经典的问题，可以把浮动想象成一个滑块的过程，遇到容器的边界或者其他浮动元素就会停止。item03 在”从右向左“滑动的过程中，由于 item01 的”阻碍“，被迫”停止“。

解决办法 ​

换用别的布局方式，或者保证浮动元素高度可控。

BFC ​

英文全称：Block Formatting Context

中文全称：块级格式化上下文

可以理解为一套“样式隔离环境”，内容不会跟外部的元素重叠或者相互影响

触发 BFC 的条件：

  • float 生效
  • overflow 值不为 visible
  • 弹性盒子 / 网格容器 / 表格单元格
  • position 的值为absolute / fixed

注意：BFC 中的内容仍然可能会发生逃逸（影响别的容器），比如说内容溢出。

Date：2025/05/28

Author：kaiven