CSS float 浮动与 clear：让文字环绕图片

float 的作用

float 把元素推到容器的一侧，让后面的文字环绕在它周围：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Float</title>
  <style>
    body { font-family: system-ui, sans-serif; line-height: 1.5; max-width: 520px; }
    .photo {
      float: left;
      width: 120px; height: 90px;
      margin: 4px 16px 8px 0;
      background: #bfdbfe; border: 2px solid #2563eb;
    }
  </style>
</head>
<body>
  <div class="photo" id="photo"></div>
  <p id="text">The box on the left is floated. This paragraph comes after it in the HTML, and its lines flow around the float instead of starting below it. Once the text passes the bottom of the float, the lines go back to the full width of the container, as you can see at the end of this paragraph when it is long enough to wrap below.</p>
</body>
</html>

浮动方块上的外边距让文字不会紧贴着它。这段间距只能靠外边距来控制；文字本身无法设置朝向浮动元素的外边距。

可选的值

inline-start 和 inline-end 跟随书写方向，所以用它们搭建的布局在从右到左的页面上能正确镜像。浮动元素还会变成块级元素：display: inline 会被转换成 block，因此即使是 span 或 img，width 和 height 也会生效。

让图片浮动在文字中

最经典的用法：文章里放一张图片，文字环绕着它。两侧各浮动一张：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Floated images</title>
  <style>
    body { font-family: system-ui, sans-serif; line-height: 1.5; max-width: 520px; font-size: 15px; }
    img { width: 110px; height: 80px; }
    .start { float: inline-start; margin-inline-end: 14px; }
    .end { float: inline-end; margin-inline-start: 14px; }
  </style>
</head>
<body>
  <p>
    <img class="start" alt="Blue square" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='80'%3E%3Crect width='110' height='80' fill='%232563eb'/%3E%3C/svg%3E">
    This image floats to the start of the line. The text of the paragraph wraps around it on the other side, and continues under it once the image ends. Floats are still the simplest tool for this magazine style layout.
  </p>
  <p>
    <img class="end" alt="Amber square" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='80'%3E%3Crect width='110' height='80' fill='%23f59e0b'/%3E%3C/svg%3E">
    This one floats to the end of the line instead. Change the direction of the page to right to left and both images switch sides with the text, because the floats use logical values.
  </p>
</body>
</html>

clear：停止环绕

clear 的意思是“从这一侧之前所有浮动元素的下方开始”。把它用在不应该排在浮动元素旁边的元素上，比如下一节的标题：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Clear</title>
  <style>
    body { font-family: system-ui, sans-serif; line-height: 1.5; max-width: 520px; }
    .box { float: left; width: 110px; height: 110px; margin-inline-end: 12px; background: #bbf7d0; border: 2px solid #16a34a; }
    h3 { margin: 8px 0; padding: 4px 8px; background: #e5e7eb; }
    .cleared { clear: both; }
    .demo { display: flow-root; margin-bottom: 20px; } /* keeps the two demos apart */
  </style>
</head>
<body>
  <div class="demo">
    <div class="box" id="box1"></div>
    <p>A short paragraph next to the float.</p>
    <h3 id="h1">This heading is not cleared</h3>
  </div>
  <div class="demo">
    <div class="box" id="box2"></div>
    <p>A short paragraph next to the float.</p>
    <h3 class="cleared" id="h2">This heading has clear: both</h3>
  </div>
</body>
</html>

第一个标题挤在了浮动元素旁边，第二个则从它下方开始。clear 可以取 left、right、both、inline-start、inline-end 和 none。

父元素塌陷与 flow-root

浮动元素脱离了正常文档流，所以子元素全部浮动的容器在文档流中没有任何内容，高度塌陷为零。它的背景和边框最后只剩浮动元素上方的一条细线：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Contain floats</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .parent { border: 3px solid #dc2626; background: #fee2e2; margin-bottom: 110px; }
    .fixed { border-color: #16a34a; background: #dcfce7; margin-bottom: 0; }
    .child { float: left; width: 90px; height: 80px; margin: 6px; background: #fde68a; }
    .fixed { display: flow-root; }
  </style>
</head>
<body>
  <div class="parent" id="broken">
    <div class="child">float</div><div class="child">float</div>
  </div>
  <div class="parent fixed" id="fixed">
    <div class="child">float</div><div class="child">float</div>
  </div>
</body>
</html>

display: flow-root 会创建一个新的块级格式化上下文（BFC），它总是会包住自己的浮动元素。较老的代码用“clearfix” 达到同样的效果：

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

overflow: hidden 或 auto 也能包含浮动元素，副作用是会裁剪内容；参见 overflow。

浮动不是用来布局的

在 flexbox 和 grid 出现之前，整个页面布局都是用浮动的分栏搭起来的，到处都是 clearfix 和宽度计算。那个时代已经过去了：浮动无法居中，无法让各栏等高，内容尺寸一变就会错乱。行和列请用 display: flex 或 display: grid，float 只用来让文字环绕某个元素。如果想让图片居中而不是让文字环绕它，参见 如何让图片居中。

沿形状环绕

shape-outside 让文字沿着一个形状环绕，而不是沿着浮动元素的矩形。它只对浮动元素有效：

.avatar {
  float: left;
  width: 120px; height: 120px;
  border-radius: 50%;
  shape-outside: circle(50%);
  margin-inline-end: 16px;
}

常见错误

• 父元素高度为零。 它的子元素全都浮动了。加上 display: flow-root。
• 用浮动做分栏或导航。 请用 flexbox 或 grid。
• 以为有 float: center。 它并不存在。用 flexbox、grid 或 margin: 0 auto 来居中。
• 浮动元素后面的内容在不该环绕时环绕了。 给它加上 clear: both，或者把浮动元素和文字放进一个 flow-root 容器。
• 在多语言网站上使用物理方向的 left 和 right。 改用 inline-start 和 inline-end，让布局在从右到左的语言中能够镜像。