Getting Started with CSS Layouts

In this section, you will understand how to use floats to create various layouts, which will help you make some more professional-looking web pages.

We haven't discussed any way to position elements side by side yet other than using inline or inline-block display options, which can limit control. Thankfully, CSS gives us plenty of tools to help us.

By the end of this section, you will understand how to use floats to create various layouts, which will help you make more professional-looking web pages.

What is a Float?

CSS's float property is used for positioning and formatting content. When an element is floated, it is removed from the document's normal flow and placed to the left or right of its container, allowing text and inline elements to wrap around it.

When you use float, an element will move as far left or right as possible, and when it runs out of space, it will move to the next line.

The float property can take one of the following 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 (this is the default value).
• inherit: The element inherits the float value of its parent.

Let's start with a basic example of using float. Open this CodePen in the browser and resize the window to see how the elements "float" to each side of the paragraph.

Clearing Floats

One common issue with floats is that they can affect the layout of other elements. When an element is floated, it is removed from the normal flow of the document, which can cause the parent container to collapse if it contains only floated elements. To solve this, we use the clear property.

The clear property specifies on which sides of an element floating elements are not allowed to float. It can take the following values:

• left: No floating elements allowed on the left side.
• right: No floating elements allowed on the right side.
• both: No floating elements allowed on either side.
• none: Default value. Allows floating elements on both sides.

Here's an example you can play with again by resizing the window:

In this example, we added a clearfix class to the parent div containing the floated elements. The clearfix class uses the ::after pseudo-element to clear the floats, ensuring the parent div properly contains its children.

Practical Layout Example

Let's create a simple layout using floats to see how they can be used in a more practical context. We will make a two-column layout with a header and a footer.

In this example:

• The .header and .footer elements span the full width of the container.
• The .sidebar and .content elements create a two-column layout.
• The clearfix class clears the floats, ensuring the container properly contains its floated children.

Open the CodePen and play with the CSS. But as you can see, this layout is starting to look much more like a real one on a website.

In modern web design, floats are usually replaced by other layout techniques like Flexbox and Grid, which we will explore in the following sections. However, understanding float layouts is important so you can understand them if you see them being used and see how some more modern techniques can make things even easier.

Homework

1. Create a three-column layout using floats.
2. Add a clearfix to ensure the parent container properly contains its floated children.
3. Experiment with different float values (left, right, none) to see how they affect the layout.