The meaning of the CSS down clear both, left, right value

Clear has a value of four

1.none: Allow floating objects on both sides;

2.both: Floating objects are not allowed;

3.left: Do not allow floating objects on the left side;

4.right: Floating objects are not allowed on the right.

To be honest, I don't really understand the literal meaning, because these paragraphs are ambiguous, for example, Clear:right's explanation is "do not allow floating objects on the right side", I always thought it was clear to the bottom of the container float. But not really. Here is a demo to see, I hope you can understand where left and right exactly is clear where the float.

One, ordinary floating, no clear floating, outer container collapse: DEMO

The code is as follows
<div class= "box Clearfix" id= "Box1" > <ul> <li class= "Item d_l FL" >float:left;</li> <li class= "Item D_c FL" >float:left;</li> <li class= "Item d_r FL" >float:left;</li> </ul> </div>

Two, left float, Clear:both clear float: DEMO

The code is as follows
<div class= "box Clearfix" id= "Box2" > <ul> <li class= "Item d_l FL" >float:left;</li> <li class= "Item D_c FL" >float:left;</li> <li class= "Item D_r both" >clear:both;</li> </ul> </div>

Three, right float, Clear:both clear float: DEMO

The code is as follows
<div class= "box Clearfix" id= "Box3" > <ul> <li class= "Item d_l FR" >float:right;</li> <li class= "Item D_c FR" >float:right;</li> <li class= "Item D_r both" >clear:both;</li> </ul> </div>

Four, floating around, clear:both clear floating: DEMO

The code is as follows
<div class= "box Clearfix" id= "Box4" > <ul> <li class= "Item d_l FL" >float:left;</li> <li class= "Item D_c FR" >float:right;</li> <li class= "Item D_r both" >clear:both;</li> </ul> </div>

Five, left float, clear left float, left floating, not clear floating collapse: DEMO

The code is as follows
<div class= "box Clearfix" id= "BOX5" > <ul> <li class= "Item d_l FL" >float:left;</li> <li class= "Item D_c CL" >clear:left;</li> <li class= "Item d_r FL" >float:left;</li> </ul> </div>

Six, right float, clear right float, left float, not clear floating collapse: DEMO

The code is as follows
<div class= "box Clearfix" id= "box6" > <ul> <li class= "Item d_l FR" >float:right;</li> <li class= "Item D_c CR" >clear:right;</li> <li class= "Item d_r FL" >float:left;</li> </ul> </div>

(The floating outer container has a background color, and if this element is not floating, the background color will be wrapped around him, otherwise it cannot be wrapped)

The CSS code they share is as follows

code as follows

<style> div,h3,ul,li{margin:0;padding:0;} H3{line-height:40px;font-size:14px;} Li{list-style:none;} . box{width:500px;margin:0 auto;padding:100px 0 500px;} Ul{background-color: #eee;} . Item{width:100px;height:100px;line-height:100px;font-size:12px;text-align:center;} . D_l{background-color: #f00;} . D_c{background-color: #ff0;} . D_r{background-color: #00f;} . Clearfix:before,.clearfix:after{content: "."; Display:block;height:0;visibility:hidden;} . Clearfix:after{clear:both;} . Clearfix{zoom:1;} . Fl{float:left;} . Fr{float:right;} . Both{clear:both;} . Cl{clear:left;} . Cr{clear:right;} </style>