Using: After to Clear Floating Elements

Using :after to clear floating elements

Write like this:

.wrapper:after {
    content: '';
    display: block;
    clear: both;
}

Check this http://jsfiddle.net/EyNnk/1/

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; }

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.

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

Floating elements above clearfixed element

As you mentioned that you are using float:right on orange box and its going inside other div then yes you have not used clear:both after using float. Point to remember that if you are using clearfix before and after on section won't work. You have to use clear:fix just after floated div or else it will break the flow and will cause issue like you are seeing.

See in demo. I simply use clear:both after floated right div and everything seems fine. To make it more simple, try to clear whenever you use float:right or left and you will not get any problem. If you are getting this with ul li tag still after last li use clear div and you are done. Hope this will help you.

clearfix after floating elements with pseudo element

A "clearfix" on an element applies to floats inside that element, and is designed to prevent the element from "collapsing" due to the floats.

You don't need a clearfix here. You're simply looking to clear the floats normally. A simple clear: left or clear: both on the element following the floats is enough.

HTML/CSS: Clear floating elements in the middle without adding unneeded tags

Just use clear: both; on the 3^rd element, this way you don't have to use <div style="clear: both;"></div> after the floated elements.

.child:nth-child(3) {
    background: blue;
    color: white;
    clear: both;
}

Demo

---

Also, if whenever you are looking to clear a parent element without adding an extra element or using overflow: hidden; which is a dirty way to clear floats, you can call a class on the parent element, with the properties below

.clear:after {
   content: "";
   display: table;
   clear: both;
}

For example

<div class="wrapper clear">
    <div class="left_floated_div"></div>
    <div class="right_floated_div"></div>
</div>

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/

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

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>

Is it correct to use float:left and clear:both in same DIV?

Yes, it's correct. Floating takes the element out-of-flow in a special way, and clearing pushes the element below previous floats.

This is not a replacement of the clearfix hack because a cleared float is still out-of-flow, and thus the parent element won't grow to encompass it (unless it establishes a block formatting context). See Floating elements within a div, floats outside of div. Why? for more information.

div {  border: 2px solid blue;  margin-bottom: 50px;}span {  float: left;  clear: both;  background: yellow;}.clearfix::after {  content: '';  display: block;  clear: both;}

No clearfix:<div>  <span>Float</span>  <span>Float</span>  Text</div>With clearfix:<div class="clearfix">  <span>Float</span>  <span>Float</span>  Text</div>

---

Related Topics