Three ways to surround floating elements

When there are floating elements:

<section><img src="images/rubber_duck2.jpg"><p>It‘s fun to float.</p></section><footer> Here is the footer element that runs across the bottom of thepage.</footer>

 Section {border:1px solid blue;  margin:0 0 px 0; }img {float:left;} Footer {border:1px solid red;} 

There are three ways to solve this problem:

• Add Overflow:hidden to Parent element

 Section {border:1px solid blue;  margin:0 0 px 0;  Overflow:hidden; }img {float:left;} P {border:1px solid red;} 

• Floating parent element at the same time

 Section {border:1px solid blue;  float:left;  width:%; }img {float:left;} Footer {border:1px solid red;  Clear:left; }

• To add a non-floating purge element

<section ;  <img   SRC  = "images/rubber_duck.jpg" ;  <p ;  It's fun to float. </p ;  <div  class  = "Clear_me" ;  </div   </section ;  <footer ;  Here is the footer element ... </footer ;   

section   {border :  1  px solid blue  ;    img  {float : left  ;    .clear_me  {< Span class= "Hljs-rule" >clear : left  ; Span class= "Hljs-rule" >   footer  {border : 1  px solid red  ;     
 

If you don't want to add this pure-expression element, I'll tell you a way to add this clear element using CSS. First, add a class to the section

<section class="clearfix"><img src="images/rubber_duck.jpg"><p>It‘s fun to float.</p></section><footer> Here is the footer element…</footer>

.clearfix:after{content:".";display:block;height:0;visibility:hidden;clear:both;}

Three ways to surround floating elements