In this Blog I am trying to explain how to use the float and clear property using CSS3.
Float Property:
This property shifted the elements to the left or right side of the current line. Floated elements will stay on the float side, until other content flows around it. The float property has four values which are followings:-
1. Left
This value is floating the element to the left side and content flowing to the right.
Example: float: left;
2. Right
This value is floating the element to the right and content flowing to the
left.
3. None
Its default value of float property and its value will be removing any float
values, and the content flow as it modest would.
Example: float: none;
4. Inherit
The element should have the similar float setting as the parent.
Example: float: inherit;
Syntax:
Float: left| right | none | inherit
Clear property:
The clear property will let you clear any or both sides (left as well as right) of the element. In other words this property is used to turn off the float. We can also say the clear property opposite of the float property. Following the values of clear property;-
1. None
None is the default value of clear property. In this case there will be no impact on the element. The floated elements can emerge on each side of the element.
Example: clear: none;
2. Both
If you put the value to 'both' then in that case no floated elements can impact on each side of the element.
Example: clear: both;
3. Left
If you put the value to 'left' then in that case no floated elements can impact on the left side of the element.
Example: clear: left;
4. Right
If you put the value to 'right' then in that case no floated elements can impact on right side of the element.
Example: clear: right;
5. Inherit
The element behavior should have the similar as the parent.
Example: clear: inherit;
Syntax:
Clear: both | left| right | none | inherit
Sample:
CSS Code:
<style type="text/css">
.thumbnail
{
float: left;
width: 110px;
height: 90px;
margin: 5px;
border: 2px dotted #E5E5E5;
}
.text_line
{
clear: both;
margin-bottom: 2px;
font-size: 18px;
color: #CD853F;
}
</style>
HTML Code:
<body>
<p class="text_line">Mindstick© Image Gallery</p>
<img class="thumbnail" src="mindstick.jpg" width="100" height="80">
<img class="thumbnail" src="mindstick.jpg" width="100" height="80">
<img class="thumbnail" src="mindstick.jpg" width="100" height="80">
<p class="text_line">Mindstick Second row</p>
<img class="thumbnail" src="mindstick.jpg" width="100" height="80">
<img class="thumbnail" src="mindstick.jpg" width="100" height="80">
<img class="thumbnail" src="mindstick.jpg" width="100" height="80">
<p style="clear: both; color: #CD853F;">Resize your browser window and see the what heppens </p>
</body>
Output:
Leave Comment