CSS Float / Clear
Float
/ Clear
If you want to wrap content around other
content (such as text around a picture), you can
use the float property. Float is very often used for images, but it is also useful when
working with layouts. The float property
(left, right) determines on which side of the bounding box the element
aligns, so that the other content wraps around it.
How
Elements Float?
Elements
floated horizontally, this means an element floated left and right not top and
bottom. The float element will move as far to the left or right as it can. The
elements after the floating element will flow around it and the elements before
the floating element will not be affected. If an image is floated to the right,
a following text flows around it to the left.
Example
Image {
float: left;
}
Floating
Elements Next to Each Other
If you
place several floating elements after each other, they will float next to each
other if there is room.
Example
image {
float: right;
height: 150px;
width: 200px;
margin: 20px;
padding: 15px;
}
Turning
off Float Using Clear Property
The clear property
(left, right, both, none, inherit) forces an element to start below a floated element.
Elements that come after the floating element will stream around it. The clear property indicates
which sides of an element's box other floating elements are not permitted.
Example
.paragraph
{
clear: both;
}
CSS
Float Properties
|
Property |
Description |
Values |
|
float |
Specifies whether or not a box should float. |
Left,
right, none, inherit |
|
Clear |
Specifies which side of an element where other floating
elements are not allowed. |
Left,
right, both, none, inherit |
Leave a comment
No Cmomments yet