Intro

Text and images, by default, are "block-level" elements which means that they take up their entire row on a webpage. We can over-ride this behaviour using the float property in CSS.

The CSS float property is used for positioning and layout on web pages. It allows an element to be placed on the left or right side of its container, enabling text and inline elements to wrap around it. This property is commonly used to float images to one side and let text wrap around them, similar to how text wraps around images in print design.

The float property can have several 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 and remains in its normal position in the text (this is the default value).
• inline-start: The element floats to the start of the inline direction.
• inline-end: The element floats to the end of the inline direction.
• inherit: The element inherits the float value of its parent.

When an element is floated, it is automatically treated as a block-level element. This means that floated elements can be styled with properties like width, height, and margin.

It's important to note that floated elements remain part of the document flow, unlike elements that are absolutely positioned. This means that floated elements can affect the layout of other elements around them, which can sometimes require additional techniques like clearing floats to manage the layout properly.

The float property is widely supported across all modern browsers, and it is a fundamental part of CSS for creating layouts and positioning elements. However, it is worth noting that floated elements can sometimes cause issues with layout, especially when the floated element is taller than its containing element, leading to overflow issues that may need to be addressed with techniques like the "clearfix" hack.

Demonstration

We are going to demonstrate this concept using this image:

with some random lorem ipsum text:

• Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora, ratione eum dolorem culpa placeat ipsum at quasi voluptatibus deserunt sapiente, consectetur ut quo enim fuga optio, doloremque id voluptatem. Placeat. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consectetur possimus quisquam nesciunt consequuntur in, sed optio quae sapiente quia eius! Temporibus, sunt? Quidem vel vero voluptate necessitatibus sunt illum aliquid?

float: left

irst we will apply the float: left property to cause the image to float to the left and wrap the text around to the right of it, like so:

Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde totam eligendi, asperiores ea earum in rerum? Cupiditate est, assumenda, nemo aliquid, officia deleniti dicta voluptate quo temporibus porro at dolorem! Eum, obcaecati? Debitis eligendi accusamus quos iste nobis porro, facere blanditiis officia. Dolores temporibus fugit consectetur, iste quasi hic eos dicta sed nemo fuga commodi libero soluta, sapiente perferendis? Harum. Rem tenetur sit hic, distinctio obcaecati omnis velit magnam necessitatibus, qui veritatis praesentium? Autem unde rerum sequi odio laudantium. Necessitatibus voluptates modi laborum quaerat soluta natus ab numquam cum dolore! Sequi culpa ullam animi maiores quasi aspernatur ex quidem earum fuga ipsum sunt tempore harum, placeat ab alias molestias porro, atque impedit praesentium labore. Facilis nisi eius inventore ab velit! Possimus perspiciatis suscipit pariatur aliquid in, nemo dolores non quis similique quidem! Nobis corporis totam cupiditate et ex eos vitae numquam exercitationem accusantium voluptate autem, sint, neque soluta beatae itaque!

float: right

And similarly, we can float: right, like so:

Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde totam eligendi, asperiores ea earum in rerum? Cupiditate est, assumenda, nemo aliquid, officia deleniti dicta voluptate quo temporibus porro at dolorem! Eum, obcaecati? Debitis eligendi accusamus quos iste nobis porro, facere blanditiis officia. Dolores temporibus fugit consectetur, iste quasi hic eos dicta sed nemo fuga commodi libero soluta, sapiente perferendis? Harum. Rem tenetur sit hic, distinctio obcaecati omnis velit magnam necessitatibus, qui veritatis praesentium? Autem unde rerum sequi odio laudantium. Necessitatibus voluptates modi laborum quaerat soluta natus ab numquam cum dolore! Sequi culpa ullam animi maiores quasi aspernatur ex quidem earum fuga ipsum sunt tempore harum, placeat ab alias molestias porro, atque impedit praesentium labore. Facilis nisi eius inventore ab velit! Possimus perspiciatis suscipit pariatur aliquid in, nemo dolores non quis similique quidem! Nobis corporis totam cupiditate et ex eos vitae numquam exercitationem accusantium voluptate autem, sint, neque soluta beatae itaque!

Clearing a Float

To clear an existing float, we use clear property. We use this property on the first element, after the float that you want to clear. The syntax is:

• clear: left;
• clear: right;
• clear: both;