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.


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.


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.


.paragraph {

  clear: both;



CSS Float Properties





Specifies whether or not a box should float.

Left, right, none, inherit


Specifies which side of an element where other floating elements are not allowed.

Left, right, both, none, inherit


Leave a comment
No Cmomments yet