How to use clear in css

The clear attribute allows elements to leave the floating flow, that is, clear the float. Its usage is as follows: left: clear the left floating element right: clear the right floating element both: clear all floating elements

Usage of clear in CSS

The role of clear attribute

The clear attribute allows elements to escape from the The float flow created by the float element is the float that is cleared.

Usage

The clear attribute has two main values:

• left: Clear the left side of the element Floating elements.
• right: Clear the floating element on the right side of the element.

Application Example

/* 清除左侧的浮动元素 */
.container {
  clear: left;
}

/* 清除右侧的浮动元素 */
.container {
  clear: right;
}

/* 清除所有浮动元素 */
.container {
  clear: both;
}

When to use

The clear attribute is usually used in the following situations:

• When a floating element causes text or other content to wrap.
• When you want to place an element next to a floating element.
• When you want to clear multiple columns of floating elements.

Note

• The clear attribute only affects the position of the current element and its descendant elements.
• The clear attribute does not apply to block-level elements because they are not floated.
• If the parent element of an element has the float attribute set, the element cannot use the clear attribute. In this case, the parent element must be cleared of float first.

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