Clear Property
The way elements interact with floated elements is controlled by the clear property. It shows if an element can be placed next to elements that have already floated.
Values:
- none: No effect on adjacent elements, allowing them to position themselves freely.
- left: Forces the element below any left-floating elements.
- right: Forces the element below any right-floating elements.
- both: Forces the element below both left and right floating elements.
- inherit: Inherits the clear property from its parent element.
Syntax:
.element {
clear: left | right | both | none | inherit;
}
Example: Implementation of Clear Property.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Clearfix Technique</title>
<style>
.container {
border: 1px solid black;
}
.clearfix::after {
content: "";
display: table;
clear: both;
}
.box {
float: left;
width: 100px;
height: 100px;
background-color: lightgreen;
margin: 10px;
}
</style>
</head>
<body>
<div class="container clearfix">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</body>
</html>
Output:
CSS Layout – float and clear
CSS layout is a fundamental design of web development that controls how elements are arranged and presented on a webpage. The properties of float and clear are important when it comes to layout design techniques. The “float” property positions an element to the left or right within its container, while the “clear” property prevents elements from wrapping around a floated element.
These are the common CSS layout:
Table of Content
- Float Property
- Clear Property