CSS Float Property

The CSS float property specifies whether an element should be floated or not. Floating basically means that the element will be taken out of the normal document flow and will be floated in the parent element. It's important to note that, in many cases, the element cannot be contained by the parent element anymore and moves out of the parent element.

According to caniuse.com, the CSS float property is effectively supported in all browsers.

The CSS float property can have either of the following values: 

  • none - This is the default value. 
  • left - The element will be floated to the left. 
  • right - The element will be floated to the right.
  • initial - This sets the property to its default value which is none. 
  • inherit - The element will inherit the value from its parent element. For example, if the value of the float property for the parent element is set to "right", the float property value for the element will be set to "right" too. 

CSS Float Property Bahavior

In order to be able to use the CSS float property practically, you need to understand its general behavior first. The following are a few important points you need to understand about float: 

Shrink Wrap - Normally a block level element gets as wide as the width of the viewport, as wide as it's possible but in case of floated elements, the width is then going to be only wide enough to accommodate the content of the box and not any wider. If the floated element were, for instance, a div, and it contained only a word, for example "Hello", then the width of the floated div would be the width necessary to accommodate the word "Hello" and not any wider. This is called shrink wrap in CSS jargon. 

Learn more about Shrink Wrap.

float: left; - In this case, the element is floated and the direction of the float is left.

Learn more about float: left; 

float: right; - In this case, the element is floated and the direction of the float is right. 

Learn more about float: right; 

Float and Width - As mentioned above, when you float an element, shrink wrap happens and the width of the element shrinks down. In order to prevent that, floating is usually accompanied with specifying a width for the element.

Learn more about Float and Width. 

Float, Height and Float Drop - When you float a few elements and specify a height for them, the elements start floating freely in the parent element. They basically move to the top of the parent element and then move in the direction specified for the float. The specified height for each of the floated elements and the available viewport width sometimes create a situation where the elements are arranged in the browser windows in such a way that you might not expect based on what you've seen in case of normal elements in the document flow. 

Learn more Float, Height and Float Drop.

Float and Collapsing Margins - Collapsing margins happens normally whenever you use CSS in an HTML page to define distances for HTML elements. Basically, the margin-bottom and margin-top of two elements on top of each other in an HTML document are collapsed. That means the browser takes the bigger margin value and ignores the smaller one. If they are equal, then only one of them is taken and the other one is ignored by the browser. In case of floated elements, collapsing margins does not happen. The margins are simply added. 

Learn more about Float and Collapsing Margins.

Closing Floats - When you float elements, they are still somehow in the normal document flow but you still need to take action to make sure that your layout doesn't break. This is to say that, floated elements don't need to be positioned like when you use position: absolute; for instance, but the floated elements don't stay in their parent elements or the parent element cannot close or contain them as is normally the case with normal elements that have not been floated. So in order to make sure that the parent element will contain them, you need to close them manually. 

Learn more about Closing Floats.

CSS Float Property Practical Applications

Float, Text and Images - The CSS float property is usually used to make text float around images on web pages. 

Learn more about Float, Text and Images. 

Float Layouts - The CSS float property is usually used to create CSS layouts based on float. Float layouts are usually very stable and widely used by different systems and frameworks. 

Learn more Float Layouts.

Horizontal Float Navigation Menus - The CSS float property is usually used to create horizontal navigation menus for web pages. 

Learn more about Horizontal Float Navigation Menus.