CSS Layout - float and clear
float is used with images, but it is also useful when working with layouts.
float property specifies whether or not an element should float.
clear property is used to control the behavior of floating elements.
The values for the float property are left, right, and none.
The float Property
In its simplest use, the
float property can be used to wrap text around images.
The following example specifies that an image should float to the left in a text:
margin: 0 0 15px 15px;
The clear Property
clear property is used to control the behavior of floating
Elements after a floating element will flow around it. To avoid this, use the
clear property specifies on which sides of an element
floating elements are not allowed to float:
The clearfix Hack - overflow: auto;
If an element is taller than the element containing it, and it is floated, it will overflow outside of its container.
Then we can add
overflow: auto; to the containing element to fix