为什么在 body 上使用 BFC 功能时无法清除浮动？

Question

在其他标签上，使用BFC可以清除浮动，为什么body不可用。果不其然，在body上加上overflow: hidden，组成一个BFC，可以达到清除float的效果，但是不是这样的？

div.f {
  float: left;
  width: 100px;
  height: 100px;
  background: red;
  margin-right: 1px;
}

body {
  overflow: hidden;
  border: 1px dashed skyblue;
}

.p {
  overflow: hidden;
}

<!DOCTYPE html>
<html lang="en">

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

<body>
    <!-- <div class="p">
        <div class="f"></div>
        <div class="f"></div>
    </div> -->

    <div class="f"></div>
    <div class="f"></div>
</body>

</html>

Answer 1

要让它在正文中起作用，您可以使用 display:flow-root，我相信这与内容的宽度如何影响正文有关 display/render，并通过添加 display:flow-root 它将清除其中的浮动标签。

div.f {
  float: left;
  width: 100px;
  height: 100px;
  background: red;
  margin-right: 1px;
}

body {
  display: flow-root;
  border: 1px dashed skyblue;
}

.p {
  overflow: hidden;
}

<!DOCTYPE html>
<html lang="en">

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

<body>
    <!--<div class="p">
        <div class="f">AAAA</div>
        <div class="">test</div>-->
    </div>

    <div class="f"></div>
    <div class="f"></div>
</body>

</html>

Answer 2

因为溢出在应用于 body 元素时具有特殊行为，它会传播到 html 元素。您需要将 overflow:auto 添加到 html 以避免这种情况：

div.f {
  float: left;
  width: 100px;
  height: 100px;
  background: red;
  margin-right: 1px;
}

body {
  overflow: hidden;
  border: 1px dashed skyblue;
}

html {
  overflow: auto;
}

<div class="f"></div>
<div class="f"></div>

UAs must apply the overflow-* values set on the root element to the viewport. However, when the root element is an [HTML] html element (including XML syntax for HTML) whose overflow value is visible (in both axes), and that element has a body element as a child, user agents must instead apply the overflow-* values of the first such child element to the viewport. The element from which the value is propagated must then have a used overflow value of visible. ^ref

所以你的 body 元素在传播后将再次 overflow:visible

为什么在 body 上使用 BFC 功能时无法清除浮动？

Why can't I clear float when using BFC feature on body?

html

css

css-float