Why Is The Image Overflowing Outside Of The Wrapper?

I'm trying to clear the float with a div after the floated image but the image is still outside of the wrapper This method to clearfix is usually effective - what am I doing wrong

Solution 1:

If you want to use an overflow method for clearing floats, then you should set overflow: auto; on your parent element.

 #wrapper {
   overflow: auto;
   width: 600px;
   border: 2px solid black;
 }
 
 #wrapper p {
   float: left;
   width: 200px;
   margin-left: 10px;
 }
 
 #wrapper img {
   float: right;
 }
 

<div id="wrapper">

  <p>
    This image is taller than the element containing it, and it's floated, so it's overflowing outside of its container!
  </p>

  <img src="picture.jpg" />

</div>

Solution 2:

1. Your clearfix class is wrong here. It should be

   wrapper .clearfix{ clear:both; }

So you will clear the floats before and after.

2. You gotta apply overflow:auto to #wrapper

   wrapper{ width:600px; border: 2px solid black; overflow: auto; }

Solution 3:

#wrapper {
margin: 10px;
border: 2px solid #000;
background: #A00;
color: #FFF;
height:auto;
overflow:auto;
width:600px;
}
 #wrapper p{
        float:left;
        width:200px;
        margin-left:10px;
        }
#img{
float:right;
height:auto;
}
 

<div id="wrapper">
<p>
            This image is taller than the element containing it, and it's floated, so it's overflowing outside of its container! 
        </p>

    <div id="img"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiM9UPozlU4UA5Wn_9QftyEcVbdLQ4G6hzzKIf06bdQzZzDEU_frFNhj4fj-cBKytReCYRteDr0unDoI0_dsnO4dYdXHb3GYPw_WOGr5wf9eHaW4W-oZtmHhyjF50aEArFMcx127Zxckbo/s1600/tall+copy.jpg"    style="margin: 10px 10px; "/>

      </div>
    </div>