Without going into why this is necessary: ​​let's say we have a picture wrapped with a link, but we need the float:left ) to be exactly the picture, not the link. Naturally, the picture will fall out of the link. How to prevent it?

I repeat once again that for reasons that we will not go into, the decision to float the link instead of the picture does not fit (otherwise I would not ask this question).

 img { float: left; width: 300px; } 
 <div> <a href="#"> <img src="images/image.png" alt="image"> </a> </div>

  • It would not be bad to add the code. It may be clearfix add a link to which the image is wrapped. - greybutton
  • Till no question, only the code absolutely obvious from the text will be ... - Gokov Sideways
  • What then does it mean? - greybutton
  • It means that the picture is out of the link, and the link itself gains a height of 0. - Side Gleb

1 answer 1

The first option is to add a display: inline-block; link display: inline-block;

 img{ float: left; width: 32px; } a { display: inline-block; } 
 <div> <a href="#"> <img src="https://www.gravatar.com/avatar/b9ba7c62da59f947cc51e7474a86e4db?s=32&d=identicon&r=PG" alt="image"> </a> </div>

The second option is to add the class .clearfix

 img{ float: left; width: 32px; } .clearfix:after { content: ""; display: table; clear: both; } 
 <div> <a href="#" class="clearfix"> <img src="https://www.gravatar.com/avatar/b9ba7c62da59f947cc51e7474a86e4db?s=32&d=identicon&r=PG" alt="image"> </a> </div>

The third option is to add a display: inline-flex; link display: inline-flex;

 img{ float: left; width: 32px; } a { display: inline-flex; } 
 <div> <a href="#"> <img src="https://www.gravatar.com/avatar/b9ba7c62da59f947cc51e7474a86e4db?s=32&d=identicon&r=PG" alt="image"> </a> </div>

  • Excellent answer! Thank you for your time. - Side Gleb