CSS Float and Clear Float: Mastering the Techniques of Float and Clear Float

1. What are CSS floats?

CSS floats are a layout technique that removes an element from the normal document flow and causes it to float around other elements in a specified direction. Floated elements can float left or right, and their characteristic is that they can overlap other floating elements.

In CSS, we use the float property to define the float state of an element. Common values ​​include left (float left), right (float right), and none (no float, i.e., no float).

Sample code:

<style>
.box {
width: 200px;
height: 200px;
background-color: red;
float: left;
}

</style>

<div class="box"></div>

Result: A 200px red square is generated on the page, floating to the left.

2. Application Scenarios of Floats

The most common application of floats is implementing multi-column layouts on web pages. By floating multiple elements to the left or right, a multi-column effect can be achieved. When a floated element exceeds the width of its parent container, it automatically wraps and continues floating.

In addition to multi-column layouts, floats are also commonly used in image layouts, creating a mixed text and image effect. By floating an image to the left or right, text automatically wraps around the image, creating a visually appealing effect.

Floating elements are also commonly used in responsive design to achieve mobile layouts. By setting the float properties of multiple elements, the arrangement of elements can be adjusted at different screen widths to adapt to the display requirements of different devices.

3. CSS Float Characteristics

3.1 Elements Out of Document Flow

Floated elements are removed from the normal document flow and no longer occupy the original space. This means that elements following the floated element will fill the space, eliminating any gaps.

3.2 Overlapping Floated Elements

Multiple floated elements can overlap. When multiple floated elements are floated horizontally, they can overlap each other until there is insufficient space. However, note that overlapping floated elements are always arranged in the order in which they appear in HTML.

Sample Code:

<style> 
.box { 
width: 100px; 
height: 100px; 
background-color: red; 
float: left; 
margin-right: 10px; 
} 
</style> 

<div class="box"></div> 
<div class="box"></div> 
<div class="box"></div> 

Result: Three squares of equal width and height with a red background color are generated on the page. They are arranged horizontally with a 10px gap between them.

3.3 Floating Elements Do Not Overlap Text

Floating elements do not overlap text, meaning that text automatically wraps around the floating element. This is very useful for achieving a mixed text and image effect.

Sample code:

<style> 
.box { 
width: 200px; 
height: 200px; 
background-color: red; 
float: left; 
margin-right: 10px; 
} 
</style> 

<div class="box"></div> 
<p> 
This is a paragraph of text, this ... This is a paragraph, this ....
</p> 

Running result: A red square with a width and height of 200px will be generated on the page. This square is located to the left of the text, and the text will wrap around the square.

4. How to Clear Floats

When using a floated layout, you often encounter the problem of floated elements causing the parent container’s height to collapse. This is because the floated element is out of the document flow and no longer occupies space, causing the parent container’s height to be incorrectly calculated. To resolve this issue, you need to clear the floats.

4.1 Clearing Floats Using an Empty DIV

You can clear the float effect by adding an empty div after the floated element and setting its clear property to both.

Sample code:

<style> 
.box { 
width: 100px; 
height: 100px; 
background-color: red; 
float: left; 
margin-right: 10px; 
} 

.clearfix::after { 
content: ""; 
display: table; 
clear: both; 
} 
</style> 

<div class="box"></div> 
<div class="box"></div> 
<div class="box"></div> 
<div class="clearfix"></div> 

Result: Three boxes with the same width and height and a red background color will be generated on the page. They will be arranged horizontally with a 10px gap between them. There will be an empty div element below, and the float is cleared by this empty div element.

4.2 Clearing Floats Using the Parent Container’s Clearfix Class

By adding a clearfix class to the parent container, you can clear the float effect of child elements. The clearfix class style is the same as the previous method.

Sample code:

<style> 
.box { 
width: 100px; 
height: 100px; 
background-color: red; 
float: left; 
margin-right: 10px; 
} 

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

.container { 
overflow: hidden; 
} 
</style> 

<div class="container clearfix"> 
<div class="box"></div> 
<div class="box"></div> 
<div class="box"></div>

</div>

Result: A parent container is generated on the page, containing three boxes of equal width and height with a red background color. They are arranged horizontally with 10px spacing between them. By adding the clearfix class to the parent container, the floats of the child elements are cleared.

4.3 Clearing Floats Using Pseudo-Elements

By adding a pseudo-element to the parent container and setting its clear property to both, the floats of the child elements can be cleared.

Sample code:

<style> 
.box { 
width: 100px; 
height: 100px; 
background-color: red; 
float: left; 
margin-right: 10px; 
} 

.container::after { 
content: ""; 
display: table; 
clear: both; 
} 
</style> 

<div class="container"> 
<div class="box"></div> 
<div class="box"></div> 
<div class="box"></div> 
</div> 

Result: A parent container is generated on the page, containing three boxes of the same width and height, with a red background color. They are arranged horizontally with a 10px gap between them. By adding a pseudo-element to the parent container, the child element’s float is cleared.

5. Notes

When using floats and clearing floats, keep in mind the following:

• The clearing float method should be placed after the floated element to ensure proper clearing.
• Ensure that the floated element does not exceed the limits of the parent container, otherwise it may cause layout confusion.
• When using floated layouts, consider responsive design requirements to ensure proper display across different screen widths.

In summary, mastering CSS float and clearing float techniques is crucial for implementing complex web page layouts. By flexibly applying float and clearing float techniques, you can achieve multi-column layouts, mixed text and image layouts, and other effects, improving the readability and aesthetics of your web pages. At the same time, pay attention to the characteristics of floated elements and clearing float methods to avoid layout issues.