According to W3C, the behavior of floating elements is such that:
When a float is present, non-positioned block boxes that come before and after the float flow vertically as if the float doesn't exist. However, line boxes positioned next to the float may be adjusted in size to accommodate the float's margin box.
This concept works smoothly with div elements:
#a
{
width: 100px;
height: 100px;
background-color: blue;
float: left;
}
#b
{
width: 200px;
height: 200px;
display: block;
border: 1px solid black;
background-color: red;
}<body>
<div id=a></div>
<div id=b></div>
</body>div being a block-level element is not affected by the floated element. (Changing the display property to inline-block would place it alongside the floating element)
However, when applying display: block to an image, it does not ignore the floating div. Why is that?
#a
{
width: 100px;
height: 100px;
background-color: blue;
float: left;
}
#b
{
width: 200px;
height: 200px;
display: block;
border: 1px solid black;
}<body>
<div id=a></div>
<img id=b src="https://www.gravatar.com/avatar/5cb44dcd4ebddfea3ede8c6d46b02795?s=328&d=identicon&r=PG&f=1">
</body>