在身体上使用BFC功能时，为什么不能清除浮动? [英] Why can't I clear float when using BFC feature on body?
问题描述
在其他标签上，使用BFC可以清除浮动，这是为什么无法使用正文的原因.如预期的那样，添加溢出:隐藏在主体上以形成BFC，可以达到清除浮标的效果，但是不是这种情况吗?
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>推荐答案
因为溢出在应用于body元素时具有特殊行为，因此会传播到html元素.您需要向HTML添加 overflow:auto 来避免这种情况:
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>UA必须将在根元素上设置的
overflow-*值应用于视口.但是，当根元素是[HTML]html元素(包括HTML的XML语法)，且其溢出值在两个轴上都是可见的，并且该元素具有body元素作为子元素时，用户代理必须改为将第一个此类子元素的overflow-*值应用于视口.从中传播值的元素必须具有可见的已使用溢出值. 参考
UAs must apply the
overflow-*values set on the root element to the viewport. However, when the root element is an [HTML]htmlelement (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 theoverflow-*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
So you body element will have again overflow:visible after the propagation
这篇关于在身体上使用BFC功能时，为什么不能清除浮动?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
