What does clear mean in css

The clear attribute in CSS controls the relationship between the element and the previous floating element: none: not affected by the floating element; left: clearing the left floating element; right: clearing the right floating element; both: clearing the left and right sides Floating elements.

The meaning of clear in CSS

clear is a property in CSS that is used to control the relationship between an element and relationship to the floated element before it. When an element is floated, it breaks away from the normal document flow, allowing subsequent elements to flow above it. The clear attribute forces subsequent elements to appear below the floated element.

Syntax

<code class="css">clear: none | left | right | both;</code>

Value

• none: The element is not affected by the preceding floated element Impact.
• left: element clears the left floating element.
• right: element clears the floating element on the right.
• both: element clears the floating elements on the left and right sides.

Example

<code class="css">.container {
  width: 100%;
}

.float-left {
  float: left;
  width: 50%;
}

.no-clear {
  clear: none;
}

.left-clear {
  clear: left;
}

.right-clear {
  clear: right;
}

.both-clear {
  clear: both;
}</code>

Effect

• .no-clear No The previous floating elements will be cleared, and .float-left will appear above .no-clear.
• .left-clear will clear the floating element on the left, and .float-left will appear above .left-clear.
• .right-clear will clear the floating elements on the right, and .float-left will appear below .right-clear.
• .both-clear will clear the floating elements on the left and right sides, and .float-left will appear below .both-clear.

Usage

The clear attribute is usually used to control the layout and order of elements in a floating layout. It ensures that content is not covered or obscured by floating elements.

The above is the detailed content of What does clear mean in css. For more information, please follow other related articles on the PHP Chinese website!