gpt4 book ai didi

html - 如果 float 元素在 HTML 结构中定义在它们之后,为什么它们不会与 block 元素重叠?

转载 作者:行者123 更新时间:2023-12-04 03:48:29 25 4
gpt4 key购买 nike

.left-box {
background-color: green;
float: left;
padding:10px;
}


.center {
background-color: lightcoral;
}
    <div class="left-box">left box</div>

<div class="center">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Repudiandae ad et ullam maiores tenetur deserunt amet laboriosam nemo delectus neque possimus nostrum, sint sequi, tempore praesentium eum tempora nulla cupiditate fugit natus repellendus explicabo? A praesentium vero debitis ab esse animi voluptatum iste totam illo fugiat suscipit, aliquid odio voluptates!
</div>

在此示例中, float 框在 HTML 结构中的 block 框之前定义,正如预期的那样,它与 block 框重叠。

但是,如果 float 框是在 block 框之后定义的...

.left-box {
background-color: green;
float: left;
padding:10px;
}


.center {
background-color: lightcoral;
}
    <div class="center">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Repudiandae ad et ullam maiores tenetur deserunt amet laboriosam nemo delectus neque possimus nostrum, sint sequi, tempore praesentium eum tempora nulla cupiditate fugit natus repellendus explicabo? A praesentium vero debitis ab esse animi voluptatum iste totam illo fugiat suscipit, aliquid odio voluptates!
</div>

<div class="left-box">left box</div>

..现在 float 框不与 block 框重叠,而是触及其底部边缘。为什么? float 框不应该从正常流中取出并向左移动,直到它接触到容器或另一个 float 框的边缘吗?

规范说明:

A floated box is shifted to the left or right until its outer edgetouches the containing block edge or the outer edge of another float.If there is a line box, the outer top of the floated box is alignedwith the top of the current line box. [...]

Since a float is not in the flow, non-positioned block boxes createdbefore and after the float box flow vertically as if the float did notexist.

但事实并非如此,对吗? float 框不接触另一个 float 框或容器的外边缘,它接触 block 框的外边缘。并且,非定位 block 框是在 float 框之前创建的,然而,对于 float 框, block 框显然存在。为什么?我错过了什么吗?

起初我以为是因为 float 框接触了 block 框内的行框,但是如果你增加 block 框的高度或边距, float 框仍然接触到底部边缘。

最佳答案

考虑文档流的纵向进程将回答您的问题。

在您的第二个示例中,尽管在 CSS 中未说明,.center具有 <div> 的默认定位和默认显示:

.center {
position: static; // by default
display: block; // by default
background-color: lightcoral;
}

这意味着它完成了在垂直流中展示自己,作为一个静态定位的 block 级实体

然后,此元素完成显示自身(在流中)后,垂直流中的下一个元素是.left-box。 .

.left-box开始在垂直文档流中的第一个可用点显示自身。

但是顶.left-box不能高于 .center 的底部因为后者已经完成了在垂直文档流中的定位和展示。


在您的第一个示例中,.center 从垂直文档流中的第一个可用点开始...但是,相比之下,这个第一个可用点不低于 .left-box 的位置。开始。

为什么不呢?因为,作为 float 元素,.left-box 不存在于垂直文档流中。

这意味着.center基本上可以忽略 .left-box并在垂直文档流中准确地显示自己,如果 .left-box不存在。

关于html - 如果 float 元素在 HTML 结构中定义在它们之后,为什么它们不会与 block 元素重叠?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64751356/

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