CSS3 clear float method example

1. Purpose

Through this article, everyone can understand the principles and methods of clearing floats, and finally come up with a method that this article believes is the best.

II. Introduction

1. Introduce and restore the original meaning of floating
2. Explain what floating is often used for in actual development
3. Question: Why do we need to clear floating
4. Answer: How to clear floating and several commonly used methods
5. Conclusion: This paper considers the best method

3. Main text

1. The original meaning of floating

The original purpose of floating was just to make text wrap around an image.

From the above figure, we can see that setting the image to float left can extract the image from the normal document flow. The subsequent elements will ignore the original position of the floating element, so you can see that the span tag displayed as a block element is inserted under the image. However, we find that the text will not be embedded under the image, because this is the purest meaning of floating - let the text surround the image (there are some discussions on the Internet about why text is not inserted under the floating element. You can search for it. This article will not explain it in more detail here).

PS: If you want to insert the text under the floating element, you can do so by setting absolute positioning.

// html code <section>
    <div class="origin1">
      ![img](http://upload-images.jianshu.io/upload_images/2944582-8c9f0eba7dce2e55.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
      <span>Imagine I am a large piece of text</span>
    </div>
    <div class="float1">
      ![img](http://upload-images.jianshu.io/upload_images/2944582-8c9f0eba7dce2e55.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
      <span>Imagine I am a large piece of text</span>      
    </div>
  </section>

// css code.origin1 span {
  display: block;
  width: 250px;
  height: 120px;
  background-color: #78f182;  
}

.float1 img{
  float: left;
}

.float1 span {
  display: block;
  width: 250px;
  height: 120px;
  background-color: #78f182;
}

2. What is floating often used for?

Because floating allows block elements to be displayed side by side, it is often used for layouts such as navigation bars and content block bars.

// html code <section class="section2">
    <ul>
      <li><a href="#">Product Center</a></li>
      <li><a href="#">Service Center</a></li>
      <li><a href="#">News Center</a></li>
      <li><a href="#">Customer Testimonials</a></li>
      <li><a href="#">Recruitment</a></li>
    </ul>
  </section>

//css code.section2 li{
  list-style: none;
  float: left;
  padding: 20px;
  height: 20px;
  background-color: #1249c3;
  border-right: 1px solid #a0a2a2;
}

.section2 li a {
  color: #fff;
}

3. Why should we clear floating

From the above picture, you can see that after the three sections float to the left, because they are out of the normal document flow, their parent element ul cannot be expanded by the child elements without setting the height (the background color can be seen because I set the padding of ul to 10px). Therefore, when you add new elements later, they will naturally be placed behind ul, that is, inserted under the three floating sections.
This is not what we want, which is why we need to clear the float.

// html code <ul>
      <li><p>Interactive Sectionli</p></li>
      <li><p>Learning Section</p></li>
      <li><p>Message Board</p></li>
      I am the parent element ul that should be wrapped outside the three sections
    </ul>

    <div class="new">I am the new div following ul</div>

//css code ul {
  padding: 20px;
  background-color: #b7db05;
}

ul li {
  width: 200px;
  height: 200px;
  background-color: #e3e3e3;
  margin-right: 20px;
  text-align: center;
  float: left;
}

.new {
  height: 50px;
  background-color: #1be751;
}

4. How to clear floating

(1) Add an empty block element div after the last floated li element and set clear:both to clear all floats.

// html code <ul>
      <li><p>Interactive Sectionli</p></li>
      <li><p>Learning Section</p></li>
      <li><p>Message Board</p></li>
      I am the parent element ul that should be wrapped outside the three sections
      <div style="clear:both;"></div> // Add code</ul>

    <div class="new">I am the new div following ul</div> 

Effect: The div element behind ul can indeed be arranged under the floating element, and setting margin, padding, etc. is also for the bottom border of the floating element.

Disadvantages: There is a redundant tag that has no structural significance.

(2) Set overflow: hidden or overflow: auto of the parent element ul.

//css code ul {
  padding: 20px;
  background-color: #e7a5b8;
  overflow: hidden;
} 

Effect: For the elements after ul, they can be arranged in sequence under the floating elements.
Disadvantages: Using this overflow method may affect the elements that use positioning, because within the range of ul, the excess part will be hidden, so if the positioned element is in the range beyond ul, it will be hidden.

(3) Using the pseudo-class method, add clear:both after the last floating element.

// css code ul:after {
  content: "";
  clear: both;
  display: block;
} 

Effect: The impact of floating is effectively eliminated without any additional effects or new semantically incorrect tags.
Disadvantages: Haven’t found any yet.

IV. Conclusion

To sum up, this article believes that the best method is to use the after pseudo-class to clear the impact of floating. Everyone is welcome to discuss.

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.