Summarize the content overflow problems caused by CSS floats and how to clear them

The float floating effect of CSS is very unstable in some cases. When the control is not good, it is generally better to clear the float. Here we will summarize the content overflow problems caused by CSS floating and the methods of clearing the float.

Throw a problem brick (display: block) and look at the phenomenon first:
In non-IE browsers (such as Firefox), when the height of the container is auto, and there are floats in the content of the container ( float (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: rightright;   
  }

<p class="news">
<img  src="/static/imghw/default1.png"  data-src="news-pic.jpg"  class="lazy"   / alt="Summarize the content overflow problems caused by CSS floats and how to clear them" >
<p>some text</p>
</p>

Clear float:

1, in float Add a
tag after the element;

　<br/>标签有自带的清除浮动属性；

2, and add a clear floating layer behind the floating element;

　<p>

　　　　<p style="float:left"></p>

　　　　<p style="float:left"></p>

　　　　<p style="clear:both"></p>

　　</p>

3, add overflow:auto style to the floating element;

4, set the following style for the last floating element:

/* 清理浮动 */
.clearfix:after {   
 visibility:hidden;   
 display:block;   
 font-size:0;   
 content:" ";   
 clear:both;   
 height:0;   
}   
.clearfix {   
 zoom:1;   
}

The principle is to use the :after pseudo-class in an "advanced" browser to add a non-display:none invisible block content after the floating block, and set clear to it :both to clean up floats. Add haslayout to the floating block in IE6 and 7 to make the floating block high and affect the document flow normally.
5, another simple method:

.cf:before, .cf:after {   
    content:"";   
    display:table;   
}   
.cf:after {   
    clear:both;   
}   
.cf {   
    zoom:1;   
}

The principle is still the same. Use the :after pseudo-class to provide clear:both after a float. The difference is that display: table is used to hide this blank space. Instead of setting visibility:hidden;height:0;font-size:0; such a hack.

It is worth noting the :before pseudo-class here. In fact, it is used to process top-margin while folding, and has nothing to do with cleaning up floats. But because floating creates a block formatting context, if another element on a floating element happens to have a margin-bottom and this floating element happens to have a margin-top, they should not be collapsed (although this is uncommon) .

The above is the detailed content of Summarize the content overflow problems caused by CSS floats and how to clear them. For more information, please follow other related articles on the PHP Chinese website!