У меня есть проблема, когда граница CSS, примененная к элементу div, растягивается вокруг промежутка.
тег прямо над ним (тег span, который НЕ находится внутри тега 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>