Several methods to clear floats

This time I will bring youseveral methods of clearing floats, and what are theprecautionsfor clearing floats. The following is a practical case, let’s take a look.

html

css

.box-left,.box-right{ width:200px; height:200px; float: left; background: red; border:1px solid #333; }

First method: .box{clear: box}

Second method:.box{overflow:hidden}

Third method:. box{overflow:auto}

Fourth method：.box:after{ content:""; height:0;visibility:hidden;display:block; clear:both;}.box{ zoom:1;}

The fifth method: .box{height:200px}Set the height

The sixth method: .box{display:table}

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

CSS to draw a red heart

##The difference between display and visibility

Several ways to implement Footer bottom placement in CSS

The above is the detailed content of Several methods to clear floats. For more information, please follow other related articles on the PHP Chinese website!