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

Question

On other tags, using BFC can clear the float, why the body is not available. As expected, add overflow: hidden on the body to form a BFC, which can achieve the effect of clearing the float, but this is not the case?

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>

score 2 · Accepted Answer · answered May 08 '20 at 12:12

because overflow has a special behavior when applied to body element and it get propagated to html element instead. You need to add overflow:auto to html to avoid this:

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

So you body element will have again overflow:visible after the propagation

Thank you very much for your answer,This is the answer I want most。 — steady, May 09 '20 at 00:54

score 1 · Answer 2 · answered May 08 '20 at 06:24

To have it working on the body, you can use display:flow-root, I believe this is have to do with how the width of the content affects the body display/render, and by adding display:flow-root it will clear floated tag inside it.

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>

Thank you very much for your answer, I would like to ask, overflow: hidden is invalid for body? — steady, May 08 '20 at 07:32
Glad to help, for your question, its not invalid, you can use but the thing is it will not create BFC on the body, and please consider [accepting answer](https://stackoverflow.com/help/someone-answers) if you find it useful :) — ROOT, May 08 '20 at 07:38

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

2 Answers2

Linked