# 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>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://irena-popova.gitbook.io/boost-your-css-skills/positioning-content/clearing-and-containing-floats.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.