What is the CSS float property?

You might have noticed the thumbnail images attached to a blog or website on a landing page or post pages to the left or right of first paragraphs or summary of the posts.

Similarly, a big first letter that covers 3,4 or more lines of the text in the news, articles or magazines websites. Both are shown in the examples below.

See an example with image

An example with text

This can be done with the CSS float property. The float property allows wrapping the text paragraphs around images, while text can also be wrapped around paragraphs. Generally, the images are wrapped in right or left directions.

Following are a few examples of using the CSS float but first its syntax.

Syntax of float property

Following is the syntax of using the float property:

float: left;

Where the values can be:

  • left: The element or image will be floated to left by using float: left;
  • right: The element or image will be floated to right by using the float: right;
  • none: The default value.
  • There is no float center value.

Example of using float left value

Following is a float left example. In this example, an image is set to float to the left of a paragraph by using float property of CSS. You can notice in the code below that image is placed inside the paragraph. See the demo and code by clicking the link or image below:

Experience this example online

Example of using float right value

Following is an example of using float: right value. In this example, an image is set to float to the right of a paragraph. See the example by clicking the link below:

Experience this example online

Example of using float property set to both direction

This example shows images are floating to both; left and right by using the float CSS property.

Experience this example online

The float property with first big letter example

In this example, the first letter of the first paragraph is floated to the left in span element by using the float property.

Experience this example online

As you can see, the letter I was occupying almost two lines of height that were assigned to the float property.

Further Reading: CSS clear