What is the role of clear in css

The clear attribute in CSS is used to clear the impact of floating elements on subsequent elements to ensure that subsequent elements are arranged normally. The clear attribute has 4 values: none: Do not clear floats left: Clear left floats right: Clear right floats both: Clear left and right floats

The role of clear in CSS

In CSS layout, the clear attribute is used to clear the impact of floating elements on subsequent elements. Floating elements will affect the position of their subsequent elements, causing subsequent elements to not be arranged normally.

Clear floats

The clear property has the following values:

• none: Does not clear any floats.
• left: Clear the floating elements on the left.
• right: Clear the floating elements on the right.
• both: Clear the floating elements on the left and right sides.

Usage scenarios

When you need subsequent elements to be arranged normally under the floating element, you can use the clear attribute. For example:

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

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

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

In this example, the .float-left element floats on the left, and the .clear element clears the influence of the floating element through clear: both, so that subsequent elements can be arranged normally.

Example

The following picture is an example of using the clear attribute:

[The picture shows two elements, the left element is floating and the right element is Use clear: both]

Use clear: both

[The picture shows that the floating elements are cleared and the elements on the right are arranged normally]

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