Float Property in CSS
- The CSS float property specifies how an element should float.
- The float property is used for positioning and formatting content.
Values of Float Property
i) left- The element floats to the left of its container.
ii) right - The element floats to the right of its container.
iii) none - The element does not float (will be displayed just where it occurs in the text). This is the default value of a float.
iv) inherit - The element inherits the float value of its parent
Using Float Property
<!DOCTYPE html>
<html>
<head>
<title> Float property in CSS </title>
<style>
img {
float: right;
width: 170px;
height: 170px;
margin-left: 15px;
}
</style>
</head>
<body>
<p> This is Geeks Help logo </p>
<img src="logo.png" alt="Geeks Help">
</body>
</html>
Output:
Clear Property in CSS
- The clear CSS property sets whether an element must be moved below (cleared).
- The clear property specifies what should happen with the element that is next to a floating element.
Values of Clear Property
i) none - The element is not pushed below left or right-floated elements. This is the default.
ii) left - The element is pushed below left-floated elements.
iii) right - The element is pushed below the right floated elements.
iv) both - The element is pushed below both left and right-floated elements.
v) inherit - The element inherits the clear value from its parent
Using clear property
<!DOCTYPE html>
<html>
<head>
<title> Float and Clear in CSS </title>
<style>
.div1 {
float: left;
padding: 10px;
border: 3px solid #73AD21;
}
.div2 {
padding: 10px;
border: 3px solid red;
clear: left;
}
</style>
</head>
<body>
<h2> Clear Left </h2>
<div class="div1"> Div 1 </div>
<div class="div2"> This is our 2nd div </div>
<br><br>
</body>
</html>
Output:
