CSS显示问题，应用于div的边框围绕其他元素延伸
我有一个问题，应用于div元素的css边框在跨度周围延伸 直接在其上方的标记（不在div标记内的范围标记）。现在，我已经有了一个解决方法，可以在下面的示例中找到，但我仍然想知道为什么会发生这种情况：CSS显示问题，应用于div的边框围绕其他元素延伸,css,html,css-float,border,Css,Html,Css Float,Border,我有一个问题，应用于div元素的css边框在跨度周围延伸 直接在其上方的标记（不在div标记内的范围标记）。现在，我已经有了一个解决方法，可以在下面的示例中找到，但我仍然想知道为什么会发生这种情况： <html> <head></head> <body> <span style="float: left;">(Floated Span)</span> <div style="border: 1px solid bla
<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>
（浮动跨度）
这是唯一应该有边框的文本。
（浮动跨度）
我不希望div标记的边界围绕浮动跨距延伸，但确实如此。
因此，我希望div标记下面的浮动范围也会这样做，但事实并非如此。
发生在FF和IE中。
（浮动跨度）
这是唯一应该有边框的文本。
（浮动跨度）
显然，BR标签很神奇，无论出于什么原因都能解决问题。
在FF和IE工作。
（跨度）
（浮动跨度）
这是唯一应该有边框的文本。
（浮动跨度）
如果在浮动跨距之前添加了一个未设置样式的跨距，Firefox将以我期望的方式显示内容。
但是，IE仍然决定从浮动跨距周围的div标记延伸边界。
（浮动跨度）
（跨度）
这是唯一应该有边框的文本。
（浮动跨度）
在代码中切换浮动跨距和未设置跨距的顺序“修复”了IE的上一个问题。
span然后，它们下面的
divspan