A deep understanding of the clear element in CSS

Clear:left; Indicates that there cannot be a floating element on the left.

Clear:right; indicates that the right side cannot have floating elements.
Clear:both: There is no floating element on either side.

However, when you use it, you also have to consider CSS precedence issues. The style developed by the same type selector, in the style sheet file, the higher the precedence.

　　When the clear property of all elements is set to right, the reason for precedence is not what you think: There are no floating elements on the left, but floating elements appear on the right.

For example, the following code:

Clear-right

Where: Class-priority relationship: P5>P4>P3>P2>P1

So, it shows the situation:

　　


　　When the clear property of all elements is set to left, the reason for precedence is not what you think: the right side can have floating elements, but not floating elements on the right.

For example, the following code:




Clear-left

Where: Class-priority relationship: P5>P4>P3>P2>P1.

So, it shows the situation:


I sometimes get dizzy occasionally. Anyway, understanding the CSS priority problem is easy to understand.