Definitions of clear both, left, and right values in css

Clear has four values.

1. none: Allow floating objects on both sides;
2. both: floating objects are not allowed;
3. left: floating objects on the left are not allowed;
4. right: floating objects on the right are not allowed.
To be honest, I didn't really understand what it meant literally, because these paragraphs are ambiguous. For example, clear: right is interpreted as "floating objects on the right are not allowed ", I always thought it was to clear the floating of the right side (below) container. But not actually. Here is a DEMO. I hope you can understand where left and right are floating.

1. Normal floating, no floating clearance, external container collapse: DEMO

The code is as follows:	Copy code
<Div class = "box clearfix" id = "box1"> <H3> normal floating, no floating, external container collapsed <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>

2. Left floating, clear: both clear floating: DEMO

The code is as follows:	Copy code
<Div class = "box clearfix" id = "box2"> <H3> left floating, clear: both clear floating <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>

3. Right floating, clear: both clear floating: DEMO

The code is as follows:	Copy code
<Div class = "box clearfix" id = "box3"> <H3> right floating, clear: both clear floating <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>

4. Floating around, clear: both clear floating: DEMO

The code is as follows:	Copy code
<Div class = "box clearfix" id = "box4"> <H3> floating around, clear: both clear floating <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>

5. Left floating, clear left floating, left floating, not floating collapse: DEMO

The code is as follows:	Copy code
<Div class = "box clearfix" id = "box5"> <H3> left floating, clear left floating, left floating, not clear floating collapse <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>

6. Right floating, clear right floating, left floating, not floating collapse: DEMO

 

The code is as follows:	Copy code
<Div class = "box clearfix" id = "box6"> <H3> right floating, clear right floating, left floating, not clear floating collapse <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 background color is added to the floating outer container. If this element is not floating, the background color will wrap it. Otherwise, it cannot be wrapped)

The css code they share is as follows:

The code is as follows:

Copy code

<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>