> For the complete documentation index, see [llms.txt](https://irena-popova.gitbook.io/boost-your-css-skills/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://irena-popova.gitbook.io/boost-your-css-skills/positioning-content/clearing-and-containing-floats.md).

# Clearing & Containing Floats

**Clearing Floats**

Clearing floats is accomplished using the `clear` property, which accepts a few different values: the most commonly used values being `left`, `right`, and `both`.

```css
div {  clear: left;}
```

The `left` value will clear left floats, while the `right` value will clear right floats. The `both` value, however, will clear both left and right floats and is often the most ideal value.

If we use the `clear` property with the value of `both` on the `<footer>` element, we are able to clear the floats. It is important that this clear be applied to an element appearing after the floated elements, not before, to return the page to its normal flow.

```css
footer {
  clear: both;
}

```

**Containing Floats**

Rather than clearing floats, another option is to contain the floats. The outcomes of containing floats versus those of clearing them are nearly the same; however, containing floats does help to ensure that all of our styles will be rendered properly.

To contain floats, the floated elements must reside within a parent element. The parent element will act as a container, leaving the flow of the document completely normal outside of it. The CSS for that parent element, represented by the `group` class below, is shown here:

```css
.group:before,.group:after {  
content: "";  
display: table;}
.group:after {  
clear: both;}
.group {  clear: both; 
 *zoom: 1;}
```

More specifically, the `:before` and `:after` pseudo-elements, as mentioned in the Lesson 4 exercise, are dynamically generated elements above and below the element with the class of `group`. Those elements do not include any content and are displayed as `table`-level elements, much like block-level elements. The dynamically generated element after the element with the class of `group` is clearing the floats within the element with the class of `group`, much like the `clear` from before. And lastly, the element with the class of `group` itself also clears any floats that may appear above it, in case a left or right float may exist. It also includes a little trickery to get older browsers to play nicely.

It is more code than the `clear: both;` declaration alone, but it can prove to be quite useful.

Looking at our two-column page layout from before, we could wrap the `<section>` and `<aside>` elements with a parent element. That parent element then needs to contain the floats within itself. The code would look like this:<br>

```markup
<header>...</header><div class="group"> 
 <section>...</section>  
 <aside>...</aside>
 </div>
 <footer>...</footer>
```

```css
.group:before,.group:after { 
 content: "";  
 display: table;}
 .group:after {  
 clear: both;}
 .group {  
 clear: both;  
 *zoom: 1;}
 section {  
 float: left; 
  margin: 0 1.5%;  
  width: 63%;}
  aside {  
  float: right; 
   margin: 0 1.5%;  
   width: 30%;
   }
```

<br>