gpt4 book ai didi

html - 什么时候应该清除 float 的 HTML 元素?

转载 作者:行者123 更新时间:2023-11-28 04:08:40 26 4
gpt4 key购买 nike

谁能解释一下什么时候应该清除 float 元素?

我注意到有时当我用 HTML 制作一些东西时,我没有清除它们,它仍然看起来不错!

也可以overflow:hidden用作清算的替代品?

看这个例子:

<html>
<head>
<style>
.a { background-color: red; overflow: hidden }
.floated-left { float: left; width: 100px; height: 100px; background-color: blue; }
</style>
</head>

<body>
<p>div with class a, that does have overflow:hidden:</p>
<div class="a">
<div class="floated-left">Hi,</div>
<div class="floated-left">Mom!</div>
</div>

<p>i didn't clear anything</p>
</body>
</html>

这里我没有清除 float 的div,而是设置了overflow:hidden对于 .a类和 <p>下面出现在正常的元素流中。

但是,如果我删除了 overflow:hidden来自 .a类,<p>流离失所。

请解释!

谢谢,Boda Cydo。

最佳答案

对于 block 级、非替换元素,当overflow未设置为“可见”和 height不是“汽车”,element's height取决于它的后代( CSS 2.1 § 10.6.6 )。因此,当您设置 overflow: hidden.a ,它延伸到包含 float 的后代。 <p>低于.a ,所以它在 float 下方。

没有overflow: hidden , .a不包含 float 的 child ;它的计算高度为 0。 <p>还在.a下方,但不是花车。 float 推送 <p> 的内联内容,就像花车一样。

尝试在 .a 周围加上边框和段落以更清楚地看到差异。

关于html - 什么时候应该清除 float 的 HTML 元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2166113/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com