Here’s an example:

.one{
    width: 100px;
    height:100px;
    background:yellow;
    float: left;;
 }
 .three{
     width:300px;
     height:300px;
     background:tomato;
     float:right;
  }
 .two{
    width:200px;
    height:200px;
    background:green;
 }
<div class="one">one</div>
<div class="three">three</div>
<div class="two">two</div>
Copy the code

The diagram below:

The floating of box one causes box two to move up, that is, box two is affected by the floating of box One. If we do not want an element to change position because other elements float, we can use the clear attribute to clear the floating element’s effect on the current element.

The clear property

Function: Can be used to clear floating effects. The clear property has three optional value, the left | right | to both. Left: indicates that the influence of the left floating element can be cleared. Right: the influence of the floating element on the right can be cleared. Both: the left and right options are selected to clear the float. Principle: A margin is set for the current element so that its position is not affected by the floating element.Copy the code
.one{
    width: 100px;
    height:100px;
    background:yellow;
    float: left;
 }
 .three{
     width:300px;
     height:300px;
     background:tomato;
     float:right;
  }
 .two{
    width:200px;
    height:200px;
    background:green;
    clear:left;
 }
<div class="one">one</div>
<div class="three">three</div>
<div class="two">two</div>
Copy the code

When clear:left, the browser default current element has a margin of 100px, as shown below:

When clear:right, the browser’s default current element has a margin of 300px, as shown below:

When clear:both, the browser’s default current element has a margin of 300px, as shown below:

Clear Resolves height collapse issues

.parent{ width:200px; border:solid 5px black; } .child{ float:left; width:200px; height:200px; background:green; } .parent::after{ content:""; display: table; clear: both; }.parent {/* Trigger hasLayout */ zoom: 1; <div class="child">child</div> </div>Copy the code