CSS Layout – Float and Clear

The float property is used for positioning and formatting content, e.g., letting text wrap around an image. The clear property is used to control the behavior of floating elements.

1. The float Property

The float property can have one of the following values:

• left – The element floats to the left of its container
• right – The element floats to the right of its container
• none – The element does not float (this is the default value)
• inherit – The element inherits the float value of its parent

<div class="float-left">Float Left</div>
<p>This text will wrap around the floating element on the left.</p>

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

2. The clear Property

The clear property specifies on which sides of an element floating elements are not allowed to float. The clear property can have one of the following values:

• left – No floating elements allowed on the left side
• right – No floating elements allowed on the right side
• both – No floating elements allowed on either the left or the right side
• none – Allows floating elements on both sides

<div class="float-left">Float Left</div>
<p class="clear">This text will not wrap around the floating element because of the clear: both property.</p>

<style>
.clear {
    clear: both;
}
</style>

3. Using float and clear Together

To avoid elements overlapping or floating elements affecting the layout of other elements, you can use the clear property.

<div class="float-left">Float Left</div>
<div class="float-right">Float Right</div>
<p class="clear">This paragraph is clear of both floating elements.</p>

<style>
.float-left {
    float: left;
    width: 100px;
    height: 100px;
    background-color: #ffccbc;
    margin-right: 10px;
}
.float-right {
    float: right;
    width: 100px;
    height: 100px;
    background-color: #b3e5fc;
    margin-left: 10px;
}
.clear {
    clear: both;
}
</style>

4. Clearing Floats with clearfix

To ensure that a container properly contains floated elements, you can use a clearfix method.

<div class="clearfix">
    <div class="float-left">Float Left</div>
    <div class="float-right">Float Right</div>
</div>

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

Conclusion

The float and clear properties are essential tools for CSS layout. They allow you to control the positioning of elements and manage how content flows around them. Understanding how to use these properties effectively can help you create more flexible and complex web layouts.