What are the ways to clear floats?

The ways to clear floats include using the clear attribute, using the overflow attribute, using BFC, using flex layout, using grid layout, and using pseudo elements to clear floats. Detailed introduction: 1. Use the clear attribute. This is the most common way to clear floating elements. Add an element after the floating element and set the clear attribute for it to prevent it from floating together with the previous floating element. There are four clear attributes. Values: left, right, both and none; 2. Use overflow, etc.

The operating system for this tutorial: Windows 10 system, DELL G3 computer.

In CSS, there are mainly the following ways to clear floats:

1. Use the clear attribute:

This is the most commonly used way to clear floats Way. Add an element after the floated element and set the clear property on it to prevent it from floating with the previously floated element. The clear attribute has four values: left, right, both and none. The left and right values ​​are used to clear the floats on the left and right sides respectively, the both value is used to clear the floats on both sides, and the none value means no clearing is performed. For example:

<div style="float:left;">浮动的元素</div>  <div style="clear:both;"></div>

2. Use the overflow attribute:

By setting the overflow attribute for the parent element, you can make the height of the parent element automatically expand to include the floating child elements. This method is often used together with the clearfix technique. For example:

.clearfix::after {content: "";display: table;clear: both;}

3. Use BFC (Block Formatting Context):

BFC is a rendering mechanism that determines how an element positions its content and interacts with other elements. Relationships and interactions of elements. BFC can be turned on by setting the following CSS properties:

• overflow: any value except auto and scroll (for example, overflow:hidden).
• opacity: a value other than 0.
• transform: A value that is not none.
• will-change: any value.
• -webkit-overflow-scrolling: Any value other than touch.
• display: Any value other than flow-root.
• new-box: When creating a new box (for example, using flexbox or grid layout).

4. Use flex layout:

Flex layout is a modern CSS layout method that automatically handles the alignment, direction, and order of elements. In flex layout, floating elements are automatically cleared without additional operations. For example:

.container {display: flex;}

5. Using grid layout:

Grid layout is also a modern CSS layout method that allows the creation of complex two-dimensional layouts. In grid layout, floating elements are automatically cleared without additional operations. For example:

.container {display: grid;}

6. Using pseudo-elements to clear floats:

This is a common technique to clear floats by setting the clear property on the parent element's pseudo-element. For example:

.parent::after {content: "";display: table;clear: both;}

The above is the detailed content of What are the ways to clear floats?. For more information, please follow other related articles on the PHP Chinese website!