Clear Directive Examples

Clear Directive Examples#

This page demonstrates the {clear} directive for clearing CSS floats.

What is the Clear Directive?#

The {clear} directive inserts a CSS clear: both element, which ensures that content flows below any floated elements rather than wrapping around them.

Example 1: Clearing After Floated Content#

Here’s an example with some content that might float:

This box is floated left. Without a clear, text would wrap around it.

Without the clear directive, this text would wrap around the floated box on the left. This can make layouts look awkward and hard to read.

After the {clear} directive, this text starts on a new line below the floated content. This ensures proper layout flow and readability.

Example 2: Multiple Floated Elements#

Left float
Right float

Text between floated elements can wrap around both of them, which often creates messy layouts.

The clear directive ensures this content starts below both floated elements, maintaining a clean layout.

Example 3: Image Layouts#

Imagine you have an image floated to the left:

Placeholder image

This text wraps around the floated image. In many cases, this is desirable for magazine-style layouts. However, sometimes you want the next section to start cleanly below the image.

New Section#

This section heading and its content now appear below the image, not wrapped around it. This is especially useful when starting new topics or sections.

Example 4: Practical Use Case#

Consider a page with side-by-side content using floats:

Column 1

Some content in the first column. This could be text, images, or any other content.

Column 2

Some content in the second column. This creates a two-column layout using floats.

Full Width Content#

After the clear directive, this content spans the full width of the page again, below both columns.

Usage#

The syntax is extremely simple:

\`\`\`{clear}
\`\`\`

That’s it! No arguments, no options. Just insert it wherever you need to clear floats.

When to Use#

  • ✅ After floated images

  • ✅ Between sections with different layouts

  • ✅ After multi-column content

  • ✅ To prevent text wrapping around floated elements

  • ✅ To ensure proper spacing between sections

CSS Behind the Scenes#

The directive simply inserts:

<div style="clear: both;"></div>

This CSS property clears both left and right floats, ensuring content flows naturally below.

Contents