CSS Float Property

Float is a CSS positioning property. 

With CSS float, an element can be pushed to the left or right, allowing other elements to wrap around it.

 Float is often used with images, but it is also useful when working with layouts.When you float an element it becomes a block box. This box can then be shifted to the left or right on the current line. The markup options are “float: left”, “float: right” or “float: none”. 
img {
float: right;
}

Floated boxes will move to the left or right until their outer edge touches the containing block edge or the outer edge of another float.If there isn’t enough horizontal room on the current line for the floated box, it will move downward, line by line, until a line has room for it. 

You should always set a width on floated items.


.thumbnail {
float: left;
width: 110px;
height: 90px;
margin: 5px;
}

 

Clearing the Float

Elements after the floating element will flow around it. To avoid this, use the clear property.

The clear property specifies which sides of an element other floating elements are not allowed.

Add a text line into the image gallery, using the clear property:

.text_line {
clear: both;
}

Leave a Reply