CSS Clearing Floats

What does the CSS rule clear: both do?

I won't be explaining how the floats work here (in detail), as this question generally focuses on Why use clear: both; OR what does clear: both; exactly do...

I'll keep this answer simple, and to the point, and will explain to you graphically why clear: both; is required or what it does...

Generally designers float the elements, left or to the right, which creates an empty space on the other side which allows other elements to take up the remaining space.

Why do they float elements?

Elements are floated when the designer needs 2 block level elements side by side. For example say we want to design a basic website which has a layout like below...

Sample Image

Live Example of the demo image.

Code For Demo

/*  CSS:  */
* { /* Not related to floats / clear both, used it for demo purpose only */    box-sizing: border-box;    -moz-box-sizing: border-box;    -webkit-box-sizing: border-box;}
header, footer {    border: 5px solid #000;    height: 100px;}
aside {    float: left;    width: 30%;    border: 5px solid #000;    height: 300px;}
section {    float: left;    width: 70%;    border: 5px solid #000;    height: 300px;}
.clear {    clear: both;}

<!-- HTML --><header>    Header</header><aside>    Aside (Floated Left)</aside><section>    Content (Floated Left, Can Be Floated To Right As Well)</section><!-- Clearing Floating Elements--><div class="clear"></div><footer>    Footer</footer>

How to Clear float for ul

Instead of float: left;, use display: inline-block; on your ul.wrapper.

https://jsfiddle.net/EyNnk/460/

For new lines between elements, use display: table-cell; for your ul.wrapper. Instead of making your li { float: left; }, use display: inline-block;. To avoid unwanted whitespace issues, set the parent's font-size: 0; and reset to the font-size you need on the li.

https://jsfiddle.net/EyNnk/464/

css - clear floats doesn't work

I think the problem is that the 'secondary' element isn't contained within the 'content' element' on your site so obviously 'content' won't grow to accomodate 'secondary'.

You need to have a rethink of your html structure.

CSS Clear Float not working with Media Queries

Apply your clearfix on the container and not the floated elements. Here you should apply the clearfix on #holder (although I would advice adding a class and targeting it instead of an id, I used container here).

/* main navigation on small screens like smartphones */
#main_nav {  position: sticky;  top: 0;  text-align: center;  box-shadow: 0 0 1.563rem 0;}
#main_nav ul {  margin: 0;  padding: 0;  background-color: #1f1f14;  border-top: 0.0625rem solid #faf352;}
#main_nav ul li {  list-style-type: none;  display: inline-block;  margin: 0.625rem 0;  width: 22%;  padding: 0;  text-align: center;}
#main_nav ul li a {  padding: 0.2rem;  color: #D7D7CF;  font-family: 'Finger Paint';  font-size: 0.7rem;  text-decoration: none;}

/* main container on small screens */
main {  padding: 0.2rem 0.5rem 0 0.5rem;}
/* large desktop screens - more than 1000px width */
@media screen and (min-width: 62.500em) {
  #main_nav {    position: static;    float: left;    width: 20%;    padding: 1rem;    box-shadow: none;  }
  #main_nav ul li {    width: 100%;    padding: 0.5rem;    display: block;  }
  #main_nav ul li a {    display: inline-block;    width: 90%;    font-size: 0.9rem;    margin: 0.2rem;    padding: 0.3rem;  }
  main {    width: 95%;    float: left;    padding: 0 1rem;  }
  /* clear float */
  .container:after {    content: "";    display: table;    clear: both;  }}

<!DOCTYPE html><html lang="en">
<head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1">  <title>page title</title>  <link href="mystyles.css" rel="stylesheet" type="text/css"></head>
<body>  <div id="holder" class="container">
    <header id="page_header">      <h1><span class="yellow">This is</span> a heading</h1>    </header>
    <nav id="main_nav" class="cf">      <ul>        <li><a href="#">link one</a></li>        <li><a href="#">link two</a></li>        <li><a href="#">link three</a></li>        <li><a href="#">link four</a></li>      </ul>    </nav>
    <main class="cf">      <section>        <article>          <h3>This is an awesome heading</h3>          <p>text</p>          <img src="images/st-color-300px.jpg" alt="picture">          <p>text</p>        </article>      </section>    </main>  </div></body>
</html>

Why is CSS clear property not clearing floats?

clear only applies to block-level elements.

https://developer.mozilla.org/en-US/docs/Web/CSS/clear

Initial value none
Applies to block-level elements
Inherited no
Media visual

div {
  background: #888;
  padding: 15px;
}

img {
  float: right;
  margin: 0px 20px 20px 0px;
}

.clear {
  display: block;
  clear: right;
}

<div>
  <img src="http://placehold.it/120x110">
  <span>This text will wrap around the image.</span>
  <span class="clear">This text isn't allowed to wrap around floated elements, and therefore will render underneath them.</span>
</div>

CSS clear float with :after element not working

Note that ::after pseudo-element doesn't create content after the element itself, but appends a pseudo-child-element into the element.

In other words, by using .widget-title::after, a pseudo-element is appended after the contents of the elements matching .widget-title selector.

<h4 class="widget-title">
    ::before <!--appended pseudo-element -->
    My Title
    ::after  <!--appended pseudo-element -->
</h4>

In order to clear the floats after the heading, you could select the next adjacent sibling element and set clear: both; declaration to it:

Example Here

.widget-title + * { clear: both; }

Or in this case:

.widget-title + div { clear: both; }

Why does 'overflow: auto' clear floats? And why are clear floats needed?

The reason why the wrapper doesn't stretch to contain its floats by default is because the floats are taken out of the normal flow of the wrapper, so the wrapper acts as if they were never there. If there is no other content in the wrapper, that means the wrapper won't have any height.

Note that overflow: auto doesn't clear floats — it just causes the element to contain its floats by way of establishing a new block formatting context for them so that they don't intrude to other elements in the parent context.¹ That is what forces the parent to stretch to contain them. You can only clear a float if you add a clearing element after the float. A parent element cannot clear its floating children.

The reason why establishing a new BFC causes an element to contain its floats is detailed here, and the reason why overflow: auto would even cause a BFC to be established is detailed here.

¹ _{OK, maybe "just" wasn't exactly the best adverb to use.}

After float: left and float: right clear: both?

clear:left Is a keyword indicating that the element is moved down to clear past left floats.

Since you have a float: right right after float: left, if you only use clear: right your element will appear under the header, because you cleared the last floating object.

If you use clear: left, you will clear the left floating element, but not the right one, so the next elements will appear under the left floating one.

So in this case, if you use clear: both, you would be doing the same as doing clear: right.

clear: both is used so no floating elements are on either side of the new element, which is not what you're doing.