HTML CSS JAVASCRIPT MySQL PHP JQUERY LIQUID

CSS Float

❮ Previous Next ❯

The CSS property called float tells an element how to float on a webpage.

The CSS property called clear decides which elements can be next to the cleared element and on which side.



The float Property

The float property helps you position and format things on a web page. For example, it can make an image move to the left side of some text inside a box.

The float property can be set to one of these options:

  • left - The item moves to the left side of its box.
  • right - The item moves to the right side of the box it's in.
  • none - The item doesn't move around (it stays in its original place in the text). This is how it normally behaves.
  • inherit -The element takes on the same floating style as its parent.

Example - float: right;

In this example, it's defined that an image should appear on the right side within a block of text.

DuckLorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac...

Example

img {
  float: right;
}
Try it Yourself »

Example - float: left;

In this example, we indicate that an image should be positioned to the left within a block of text.

PineappleLorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac...

Example

img {
  float: left;
}
Try it Yourself »

Example - No float

In this example, the image will appear exactly where it's placed in the text without any special alignment (using "float: none;").

Pineapple Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac...

Example

img {
  float: none;
}
Try it Yourself »

Example - Float Next To Each Other

Normally div elements will be displayed on top of each other. However, if we use float: left we can let elements float next to each other:

Example

div {
  float: left;
  padding: 15px;
}

.div1 {
  background: red;
}

.div2 {
  background: yellow;
}

.div3 {
  background: green;
}
Try it Yourself »

CSS Layout - clear and clearfix

The clear Property

When we apply the float property, and we want the next element to be positioned below it (not on the right or left), we need to use the clear property.

The clear property tells us what should occur with an element that is positioned next to another element that is floating.

The clear property can be set to one of these options:

  • none - The element stays in its position even when there are elements floated to the left or right. This is the default behavior.
  • left - The element is moved underneath the left-aligned elements.
  • right - The element is moved down below the elements that are floating to the right.
  • both - The item is moved down beneath elements that float to the left and the right.
  • inherit - The element gets its 'clear' value from its parent.

When you want to stop elements from floating next to each other, you should make sure the clearing direction matches the floating direction. For example, if an element is floated to the left, you should clear it to the left as well. This way, the floated element will stay where it is, but the cleared element will show up below it on the webpage.

Example

div1 {
  float: left;
}

div2 {
  clear: left;
}
Try it Yourself »

The clearfix Hack

When a floated item is taller than its containing element, it sticks out beyond the container's boundaries. To fix this issue, we can apply a clearfix hack.

Example

.clearfix {
  overflow: auto;
}
Try it Yourself »

The overflow: auto trick is good if you can manage your margins and padding properly (or else you might get scrollbars). But there's a better and safer way to clear content called the new, modern clearfix technique. Most webpages use the following code for it:

Example

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}
Try it Yourself »
❮ Previous Next ❯