在其他标签上,使用BFC可以清除浮动,为什么body不可用。
果然,在body上添加overflow:hidden,形成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>
因为溢出在应用于 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 https://drafts.csswg.org/css-overflow-3/#overflow-propagation
这样你的身体元素就会再次拥有overflow:visible
传播后
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)