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;
 }
 
 #wrapperp {
   float: left;
   width: 200px;
   margin-left: 10px;
 }
 
 #wrapperimg {
   float: right;
 }
 

<divid="wrapper"><p>
    This image is taller than the element containing it, and it's floated, so it's overflowing outside of its container!
  </p><imgsrc="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;
}
 #wrapperp{
        float:left;
        width:200px;
        margin-left:10px;
        }
#img{
float:right;
height:auto;
}
 

<divid="wrapper"><p>
            This image is taller than the element containing it, and it's floated, so it's overflowing outside of its container! 
        </p><divid="img"><imgsrc="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWzBAIr8JvU1gKO7hmqSEco2gxtEJg_Z6R0m8lqDfirWCTFeOkEz9BsydZ35h2LGerzoptZbPvC1azih_GCDX877DCZPRXqGg3qZpPmQS1PaB6JRc5K4XF7P7ZRjLNxZXjRU3_AMMzWZQ/s1600/tall+copy.jpg"style="margin: 10px 10px; "/></div></div>