Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

CSS Float: A Tutorial

DZone's Guide to

CSS Float: A Tutorial

CSS is crucial knowledge for any front-end developer, and the float property is a cornerstone of the language. Let's try to better understand float in this post.

· Web Dev Zone ·
Free Resource

Learn how Crafter’s Git-based content management system is reinventing modern digital experiences. Download this white paper now. 

One of the basic and the most important properties every web designer should learn is the float property. It is most commonly used for floating text around the image or creating the two column layout. The float property can cause a lot of frustration and confusion if it's not fully understood, so we're here to make those confusions disappear with this short explanation.

Also, be sure to check out our articles on some other properties, other than CSS float, that often cause confusion like CSS columns or relative font size.

The Definition

The CSS float property specifies, as the name says, how the element should float. With the usage of the float property, the element is placed along the left or right side of its container.

The float property has the possible values:

  • Left - the element floats to the left side of its containing block.
  • Right - the element floats to the right side of its containing block.
  • None - the element must not float.

When an element has float set to it, it is shifted to the right or left side until it touches the edge of the container element or another floated element.

Support

The best place to check how well the CSS property is supported is the Can I Use service. Here, we see that the float property has an extremely high support, with over 97%.

Examples

Now, we will support the float theory with examples to make things understandable. The examples will show you how to float text around a div.

HTML

<div class="container"> 
<div class="left-segment"></div> 
    <div class="right-segment"></div> 
    <p class="segment_text">Cardigan aesthetic direct trade, migas locavore shoreditch DIY bicycle rights lyft street art bitters. Gastropub salvia flexitarian next level cold-pressed iceland williamsburg tofu biodiesel everyday carry. Direct trade selfies mixtape 8-bit jean shorts paleo. Roof party thundercats gastropub, jianbing williamsburg microdosing tbh dreamcatcher crucifix. Fingerstache crucifix shoreditch, kitsch selfies tumblr everyday carry aesthetic. Narwhal readymade cardigan gentrify.
    </p> 
</div> 

CSS

.container { 
  border: solid thin #ccc; 
} 

.left-segment { 
  height: 200px; 
  width: 200px; 
  background-color: #C98EED; 
  float: left; 
} 

.right-segment { 
  height: 200px;
  width: 200px; 
  background-color: #8FC9FF; 
  float: right; 
} 

In this example, we can see the two divs floated to the right and left the side of the container. The text is flowing around the divs and continuing below it.

Afterward, we can give the elements some styling and the text some formatting.

HTML

<div class="container"> 
<div class="left_segment"></div> 
    <div class="left_segment"></div> 
    <p class="segment_text">Cardigan aesthetic direct trade, migas locavore shoreditch DIY bicycle rights lyft street art bitters. Gastropub salvia flexitarian next level cold-pressed iceland williamsburg tofu biodiesel everyday carry. Direct trade selfies mixtape 8-bit jean shorts paleo. Roof party thundercats gastropub, jianbing williamsburg microdosing tbh dreamcatcher crucifix. Fingerstache crucifix shoreditch, kitsch selfies tumblr everyday carry aesthetic. Narwhal readymade cardigan gentrify.
    </p> 
</div> 

CSS

.container { 
  border: solid thin #ccc; 
} 

.left-segment { 
  Height: 200px; 
  Width: 200px; 
  Margin-right: 10px; 
  Background-color: #A1ED8E; 
  Float: left; 
} 

The second example shows how two divs are floated to the left side of the container using the float:left property and how the text flows around those divs and continues below them.

Hopefully, this article will be useful when working with the float property.

Other important properties, other than float, include the line height and the position property.

Crafter CMS is a modern Git-based platform for building innovative websites and content-rich digital experiences. Download this white paper now.

Topics:
css ,web dev ,front-end development ,css style

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}