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
The CSS float property changes the element's normal flow and allows content to wrap around it by allowing it to be positioned to the left or right of its container.
Values:
- left: floats the element to the left side of its container.
- right: floats the element to the right side of its container.
- none: The element doesn't float and remains in the normal document flow.
- inherit: Inherits the float property from its parent element.
Syntax:
.element {
float: left | right | none | inherit;
}
Example: Implementation of float property to create a two-column layout, with content flowing around floated elements.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Float-based Layout</title>
<style>
.float-left {
float: left;
width: 50%;
background-color: lightblue;
}
.float-right {
float: right;
width: 50%;
background-color: lightcoral;
}
</style>
</head>
<body>
<div class="float-left">Left Content</div>
<div class="float-right">Right Content</div>
<div style="clear: both;"></div>
</body>
</html>
Output:
.gif)
Output
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:
.png)