在body上使用BFC功能，为什么不能清空浮动？

问题描述 投票：1回答：1

在其他标签上，使用BFC可以清除浮动，为什么正文不可用.如预期，在正文上添加溢出：隐藏形成BFC，可以达到清除浮动的效果，但事实并非如此？

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>
css css-float
1个回答
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必须应用 overflow-* 的值设置到视口。但是，当根元素是一个[HTML] html 元素（包括HTML的XML语法）的溢出值是可见的（在两个轴上），并且该元素有一个body元素作为子元素，那么用户代理必须应用 overflow-* 值的第一个这样的子元素传播到视口。传播值的元素必须有一个使用过的溢出值，即可见的. 参考

所以你的身体元素又会有 overflow:visible 传播后

1
投票

为了让它在身体上发挥作用，你可以使用 display:flow-root我相信这是与内容的宽度如何影响身体displayrender，并通过添加 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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.