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