0
我有一个问题，其中应用于div元素的CSS边界正在它上面延伸的标记 上方（不在div标记内的span标记）。现在，我已经有了这个可以在下面的例子中可以找到一个解决办法，但我仍想知道为什么发生这种情况：CSS显示问题，其中div应用于其他元素的边界
<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>