Consider this line of code:
#bluediv {
background-color: blue;
width: 100px;
height: 100px;
float: left;
}
#greendiv {
background-color: green;
width: 100px;
height: 100px;
}<div>
<div id="bluediv">
</div>
<div id="greendiv">
</div>
</div>You will notice that since #greendiv disappears under the floated #bluediv. At first, I thought it was because <div> is a block-element but when I tried <p>, which is also a block-element, it behaves as below:
#bluediv {
background-color: blue;
width: 100px;
height: 100px;
float: left;
}
#greendiv {
background-color: green;
width: 100px;
height: 100px;
}<div>
<div id="bluediv">
</div>
<p>Paragraph</p>
Normal text
<div id="greendiv">
</div>
</div>It wraps around the floated #bluediv instead (along with the normal text)!
Why do they behave differently?
The paragraph itself does not wrap around the float. Only its text does, along with the bare text between the paragraph and #greendiv (which resides in an anonymous block box).
And that's why you'll also notice that #greendiv is shifted down — it's because of the addition of the paragraph, and the anonymous block box that contains the bare text.
If you make #bluediv translucent, put the bare text in its own block element that you can target with CSS, and make the boxes of both block elements visible (i.e. and not completely transparent against the background), you can see what's really happening:
#bluediv {
background-color: rgba(0, 0, 255, 0.5);
width: 100px;
height: 100px;
float: left;
}
#greendiv {
background-color: green;
width: 100px;
height: 100px;
}
p, span {
display: block;
border: solid;
}<div>
<div id="bluediv">
</div>
<p>Paragraph</p>
<span>Normal text</span>
<div id="greendiv">
</div>
</div>Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments