Home > Web Front-end > CSS Tutorial > What does clear mean in css

What does clear mean in css

下次还敢
Release: 2024-04-26 11:15:21
Original
880 people have browsed it

The clear attribute in CSS is used to control the area around the floating element and specify the positioning method of subsequent elements. It has three values: left, right, and both, which are used to move from the left, right or left side of the floating element respectively. The positioning of subsequent elements begins on the left and right sides.

What does clear mean in css

clear

What does clear mean in CSS?

The clear property is used to control the area around floating elements. It specifies how subsequent elements are positioned when a floated element is encountered.

Detailed explanation:

Floating elements will break away from the normal document flow and be arranged along the edges of their parent elements. The clear attribute allows subsequent elements to skip over floated elements instead of surrounding them.

There are three clear values:

  • left: The element starts from the left side of the floating element
  • right: Elements start from the right side of the floated element
  • both:Elements start from the left and right sides of the floated element

Usage example:

<code class="css"><div class="container">
  <div class="float-left">浮动元素</div>
  <div class="clear"></div>
  <div>后续元素</div>
</div></code>
Copy after login

In the above example, the .clear class has the clear: both; attribute applied. This will cause subsequent elements to start to the left and right of the floated element, creating a gap so that subsequent elements will not be wrapped by the floated element.

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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template