What is the function of clear in css

CSS clear attribute (clear) is used to control the relationship between elements and floating elements to ensure that non-floating elements will not flow under floating elements. Usage is as follows: none: do not clear float left: clear left float right: clear right float both: clear left and right float

clear attribute in CSS The role of

clear attribute is used to control the relationship between an element and a floating element to ensure that non-floating elements will not flow under floating elements.

Usage

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

• none: Default value, do not clear 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.

Function

When elements are floated, they will be placed outside the document flow, and subsequent non-floated elements will flow below the floating elements. The clear attribute sets the clear value of a non-floated element to force it to start above the floated element.

For example, the following code will ensure that the paragraph element does not flow below the floating image:

<code class="css">p {
  clear: both;
}</code>

Example

Assume the following HTML code:

<code class="html"><div class="container">
  <div class="image float-left"></div>
  <p>段落</p>
</div></code>

If the clear attribute is not set, the paragraph element will flow below the image element, causing layout confusion.

By setting the clear attribute, you can ensure that the paragraph element starts above the image element:

<code class="css">.container {
  width: 500px;
}

.image {
  float: left;
  width: 200px;
  height: 200px;
  background: #f00;
}

p {
  clear: both;
}</code>

In this example, the paragraph element is forced to start above the image element, making the layout clear.

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