CSS Tips: Clear Floats

What is CSSclear float?

In non-IE browsers (such as Firefox), when the height of the container is auto and there is float in the content of the container (float is left or right) In this case, the height of the container cannot automatically extend to adapt to the height of the content, causing the content to overflow outside the container and affect (or even destroy) the layout. This phenomenon is called float overflow, and the CSS processing performed to prevent this phenomenon is called CSS clear float.

Quoting the W3C example, the news container does not surround floating elements.

.news {
  background-color: gray;
  border: solid 1px black;
  }

.news img {
  float: left;
  }

.news p {
  float: right;
  }<p><img  src="/static/imghwm/default1.png" data-src="news-pic.jpg" class="lazy" alt="CSS Tips: Clear Floats" ></p><p>some text</p>

Clear float method

Method 1: Use an empty element with clear attribute

Use an empty element after the floating element such as

, and You can clear floats by assigning the .clear{clear:both;} attribute in CSS. You can also use
or

---

for cleaning.

.news {
  background-color: gray;
  border: solid 1px black;
  }

.news img {
  float: left;
  }

.news p {
  float: right;
  }

.clear {
  clear: both;
  }<p><img  src="/static/imghwm/default1.png" data-src="news-pic.jpg" class="lazy" alt="CSS Tips: Clear Floats" ></p><p>some text</p><p></p>

Advantages: simple, less code, good browser compatibility.

Disadvantages: A large number of unsemantic html elements need to be added, the code is not elegant enough, and it is not easy to maintain later.

Method 2: Use the CSS overflow attribute

Add overflow:hidden; or overflow:auto; to the container of the floating element to clear the float , in addition, hasLayout needs to be triggered in IE6, such as setting the container width and height for the parent element or setting zoom:1.

After adding the overflow attribute, the floating element returns to the container layer, raising the height of the container, achieving the effect of cleaning up the floating elements.

 some text

Method 3: Add floats to the container of floating elements

Add floats to the container of floating elements Also add floating attribute to clear the internal float, but this will make it float overall and affect the layout, so it is not recommended.

Method 4: Use adjacent element processing

Do nothing and add the clear attribute to the element behind the floating element.

.news {
  background-color: gray;
  border: solid 1px black;
  }

.news img {
  float: left;
  }

.news p {
  float: right;
  }

.content{
  clear:both;
  }<p><img  src="/static/imghwm/default1.png" data-src="news-pic.jpg" class="lazy" alt="CSS Tips: Clear Floats" ></p><p>some text</p><p></p>

Method Five: Use CSS:after pseudo-element

Combined with:after pseudo-element ( Note that this is not a pseudo-class, but a pseudo-element, which represents the nearest element after an element) and IEhack, which is perfectly compatible with all major current mainstream browsers. IEhack here refers to triggering hasLayout.

Add a clearfix class to the container of the floating element, and then add a :after pseudo-element to this class to add an invisible block element (Block element) to the end of the element to clean up the float.

.news {
  background-color: gray;
  border: solid 1px black;
  }

.news img {
  float: left;
  }

.news p {
  float: right;
  }

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

.clearfix {
  /* 触发 hasLayout */ 
  zoom: 1; 
  }<p><img  src="/static/imghwm/default1.png" data-src="news-pic.jpg" class="lazy" alt="CSS Tips: Clear Floats" ></p><p>some text</p>

Add an invisible space "020" or dot "." at the end of the internal element of the container through CSS pseudo-elements, and assign the clear attribute to clear the float. It should be noted that for IE6 and IE7 browsers, a zoom:1; must be added to the clearfix class to trigger haslayout.

Summary

Through the above example, we can easily find that the methods of clearing floats can be divided into two categories:

The first is to use the clear attribute, including adding an empty p with the clear: both attribute at the end of the floating element to close the element. In fact, the method of using the :after pseudo-element is to add a dot with the content at the end of the element. Implemented for elements with the clear: both attribute.

The second is to trigger the BFC (Block Formatting Contexts, block-level formatting context) of the parent element of the floating element, so that the parent element can contain floating elements. Regarding this point.

Recommendation

Use the :after pseudo-element method during the main layout of the web page and use it as the main way to clean up floats; Use overflow:hidden; in small modules such as ul (pay attention to the problem of hidden overflow elements that may occur); if it is a floating element, the internal floats can be automatically cleared without special processing; use adjacent elements in the text to clean up the previous floats.

Finally, you can use the relatively perfect :after pseudo-element method to clean up the floats, making the document structure clearer.

The above is the detailed content of CSS Tips: Clear Floats. For more information, please follow other related articles on the PHP Chinese website!