Arranging content using the float and clear properties in CSS

Web Design with HTML & CSS

🕑 This lesson will take about 10 minutes

In this lesson, we will use the float and clear CSS properties to arrange images and text on a web page.:

    • float property – with the float property, an element can be pushed to the left or right letting other elements on the web page wrap around it. It is often used to arrange images and for div layouts.

    • clear property – with the clear property, we can specify which side or sides of an element that are floating elements aren’t allowed to be. The float property can be set to none, left, right, both, or inherit (inherit from the parent element). Setting the clear property to ‘both’ for a div means that no other floating divs can be to the left or the right of this div.

In this lesson, we will float an image and clear a paragraph. We can float an image to the left or right and clear other content around it.

Here is an example of an image floating to the left without clearing the text.

Here is an example of an image floating to the right without clearing the text.

And here is an example of the image floating to the left and the clear property for the paragraph of text set to clear left.

Watch the video below and then scroll down to see the sample HTML and CSS code.

Here is the sample HTML code that places two divs next to each other on a page (an image to the left and text to the right side):

Here is the sample HTML code:

The result would look like this: