CSS Tutorial
CSS - Introduction CSS - How CSS works? CSS - Syntax CSS - Colors CSS - Backgrounds CSS - Borders CSS - Margins CSS - Padding CSS - Height/Width CSS - Box Model CSS - Text CSS - Fonts CSS - Icons CSS - Cursor CSS - Outline CSS - Links CSS - Lists CSS - Tables CSS - Display CSS - Overflow CSS - Position CSS - Float CSS - Align CSS - Opacity CSS - Combinator CSS - Pseudo Classes CSS - Pseudo Elements CSS - Attribute Selector CSS - Buttons CSS - Pagination CSS - Navigation Bar CSS - Dropdowns CSS - Specificity CSS - Transition
CSS Advanced
CSS - Rounded Corners CSS - Border Image CSS - Background CSS - Gradients CSS - Shadow CSS - Text Effects CSS - 2D Transform CSS - 3D Transform CSS - Animation CSS - Object-fit CSS - Box Sizing CSS - Filters CSS - Style Images CSS - Variables CSS - Media Queries CSS - Flexbox Layout CSS - Grid Layout
CSS Responsive
RWD - Introduction RWD - Grid View RWD - Media Queries RWD - Images
CSS References
CSS - Reference CSS - Selectors CSS - Functions CSS - Units CSS - Animatable CSS - Entities

CSS Layout - The float Property

The float property defines how an element should float.


The float Property

The float property specifies that an element should be placed along the left or right side of its container, allowing text and inline elements to wrap around it. The floated element is removed from the normal flow of the document.

The float property can have one of the following values:

  • left - The element floats to the left of its container
  • right - The element floats to the right of its container
  • none - The element does not float (will be displayed just where it occurs in the text). This is default

float: right

The following example specifies that an image should float to the right side of its container:

Flower

Run code

float: left

The following example specifies that an image should float to the left side of its container:

Flower

Run code

In the following example, there are three colored squares. Two are floated left, and one is floated right. Note that the second "left" square is placed to the right of the first. Additional squares would continue to stack to the right, until they filled the containing box, after which they would wrap to the next line:

Run code

The clear Property

The clear property specifies what elements can float beside the cleared element and on which side.

This property can have one of the following values:

  • none - Allows floating elements on both sides. This is default
  • left - No floating elements allowed on the left side
  • right - No floating elements allowed on the right side
  • both - No floating elements allowed on either the left or the right side

The most common way to use the clear property is after you have used a float property on an element.

Run code

Below down is an another example of clear property:

Run code

The clearfix Hack

There may be situations when an element is taller than the element containing it, and it is floated, it will overflow outside of its container as shown in below example:

Uh oh... this image is taller than the element containing it, and it's floated, so it's overflowing outside of its container!

To fix this problem add overflow: auto; to the containing element:

Much better!

Use clearfix hack to quickly and easily clear floated content within a container.
Run code

The overflow: auto clearfix works well as long as you are able to keep control of your margins and padding (else you might see scrollbars). The new, modern clearfix hack however, is safer to use:

Run code

You will learn more about the ::after pseudo-element later in this tutorial.


Grid Layout / Equal Width Columns

Using the float property, we can easily float elements side by side:

Column 1
Column 2
Column 1
Column 2
Column 3
Column 1
Column 2
Column 3
Column 4
Run code

The box-sizing property defines how the browser should calculate the total width and height of an element: should they include padding and borders, or not.


Images Side By Side

Using the float property, we can easily float images side by side:

Mumbai CST
Mumbai CST
Mumbai CST
Run code

Flexible Web Layout

It is common to make entire web layouts using the float property:


CSS Float Properties

Property Description
box-sizing Defines how the browser should calculate the total width and height of an element: should they include padding and borders, or not.
clear Specifies on which sides of an element floating elements are not allowed to float.
float Defines how an element should float.
overflow Controls what happens to content that is too big to fit into an area.
overflow-x Specifies what to do with the left/right edges of the content if it overflows the element's content area.
overflow-y Specifies what to do with the top/bottom edges of the content if it overflows the element's content area.