In non-Internet Explorer browsers such as Firefox, when the height of the container is auto and the contents of the container contain floating elements (float is left or right), the height of the container cannot automatically grow to fit the contents, causing the contents to spill out of the container and affect (or even destroy) the layout. This phenomenon is called float overflow, and CSS processing to prevent this phenomenon is called CSS clear float.

Citing the W3C example, the news container does not enclose floating elements.

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

.news img {
  float: left;
  }

.news p {
  float: right;
  }

<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
</div>
Copy the code

Method 1: Use an empty element with the clear attribute

Use an empty element after the float element such as

and assign it to the CSS. } property cleans up the float. Alternatively, use

or

. 

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

.news img {
  float: left;
  }

.news p {
  float: right;
  }

.clear {
  clear: both;
  }

<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
<div class="clear"></div>
</div>
Copy the code

Method 2: Use the OVERFLOW property of CSS

Add overflow: Hidden to the container of floating elements; Or overflow: auto; You can clear floats, and in IE6 you also need to trigger hasLayout, such as setting the container width or zoom:1 for the parent element. After the overflow property is added, the float element goes back to the container layer and pushes up the container height to clean up the float.

.news {
  background-color: gray;
  border: solid 1px black;
  overflow: hidden;  *zoom: 1;
  }

.news img {
  float: left;
  }

.news p {
  float: right;
  }

<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
</div>
Copy the code

Method three: use adjacent elements

Do nothing and add the clear attribute to the element after the float element.

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

.news img {
  float: left;
  }

.news p {
  float: right;
  }

.content{
  clear:both;
  }

<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
<div class="content"></div>
</div>
Copy the code

Method 5: Use CSS :after pseudo-elements

A combination of: After pseudo-elements (note that this is not a pseudo-class, but a pseudo-element that represents the nearest element after an element) and IEhack, which is used to trigger hasLayout, is perfectly compatible with all major browsers. Add a ClearFix class to the container of floating elements, and then add one to the class :after pseudo-element implementation adds an invisible 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 {/* Trigger hasLayout */ zoom: 1; }<div class="news clearfix">
<img src="news-pic.jpg" />
<p>some text</p>
</div>
Copy the code

Refer to www.cnblogs.com/ForEvErNoME…