gpt4 book ai didi

应用于 div 的边框在其他元素周围延伸的 CSS 显示问题

转载 作者:太空宇宙 更新时间:2023-11-04 16:15:43 24 4
gpt4 key购买 nike

我遇到一个问题,即应用于 div 元素的 css 边框在跨度周围延伸它正上方的标签(不在 div 标签内的 span 标签)。现在,我已经有了解决方法,可以在以下示例中找到,但我仍然想知道为什么会这样:

<html>
<head></head>

<body>
<span style="float: left;">(Floated Span)</span>
<div style="border: 1px solid black;">
This is the only text which should have a border around it.
</div>
<span style="float: left;">(Floated Span)</span>
<br />

<br />
I do NOT expect the border from the div tag to stretch around the floated span, but it does.
<br />
Therefore, I would expect the floated span below the div tag to do the same, but it doesn't.
<br />
Happens in FF and IE.
<br />
<br />

<span style="float: left;">(Floated Span)</span>
<br />

<div style="border: 1px solid black;">
This is the only text which should have a border around it.
</div>

<span style="float: left;">(Floated Span)</span>
<br />

<br />
Apparently BR tags are magical and solve the problem for whatever reason.
<br />
Works in FF and IE.
<br />

<br />
<span>(Span)</span>
<span style="float: left;">(Floated Span)</span>

<div style="border: 1px solid black;">
This is the only text which should have a border around it.
</div>

<span style="float: left;">(Floated Span)</span>
<br />

<br />
If an unstyled span is added before the floated span, Firefox displays the content the way I expect.
<br />
However, IE still decides to stretch the border from the div tag around the floated span.
<br />

<br />
<span style="float: left;">(Floated Span)</span>
<span>(Span)</span>

<div style="border: 1px solid black;">
This is the only text which should have a border around it.
</div>

<span style="float: left;">(Floated Span)</span>

<br />

<br />
Switching the order of the floated span and unstyled span in the code 'fixes' the previous issue with IE.
</p>
</body>
</html>

最佳答案

参见 block formatting contexts在 w3.org 上。

In a block formatting context, each box's left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch). This is true even in the presence of floats (although a box's line boxes may shrink due to the floats)

关于应用于 div 的边框在其他元素周围延伸的 CSS 显示问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7520976/

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