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

Question

Most of the clearfix techniques out there involves adding things at the very bottom of the parent container, and I prefer the pseudo element approach the most since it doesn't add unneeded elements into the HTML.

However, recently I found that I am dealing with a container that has some children floating but not all. Say the first 2 children the first floats left and the second floats right. I need a way to clear the float right after the second element, so the content below doesn't get squeezed in between them. Is there a way to clear floating elements in the middle but without adding clearfix element?

Below is an example:

HTML

<div class="container">
    <div class="child">
        first child!
    </div>
    <div class="child">
        second child!
    </div>
    <div class="child">
        third child!
    </div>      
</div>

CSS

.container {
    width: 200px;
}

.child:nth-child(1) {
    float: left;
    background: yellow;
}

.child:nth-child(2) {
    float: right;
    background: red;
}

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

Please see this jsfiddle to see what I have right now.

Af

Answer 1

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>

Mete

Thanks for answering, all are great and obvious answers but I'll accept yours since it has more info. And boy oh boy I was so stupid to not see such an obvious solution... Just use whatever comes after to clear the float! As an aside, if I have multiple elements floating left and right alternatively, is there anyway to tell them to start a new line on each float left instead of jamming them all on the same line? Without setting width on them. – Af

@Af I also have an answer here which covers a bit of floats too ;) and you welcome... – Mete

@Af and for your question, change the DOM, that's a good practice to wrap up the floating elements in a wrapper element, and use clear class which I've already suggested in my answer jsfiddle.net/dJxD4/9 – Mete

I am generally resistant to using extra wrappers in my HTML as I think that sort of injects visual implications into the markup. In my case I am using definition list, so things floating left are <dt>'s and things floating right are <dd>'s. But I would like to know why you say it is a good practice wrapping floating elements? – Af

@Af good practice in the sense if we take the DOM, there is nothing to be resistant to ignore the wrapping elements, you are just binding your data into smaller boxes, dt and dd have special meanings, just like ul li has, using correct tags for your document is essential, also from SEO point of view.. so don't be redundant to use wrapper elements – Mete

Well not to say I totally agree with your point of view, they are easy to ignore provided you know they are meaningless wrappers. My main concern is using unneeded extra wrappers messes up hierarchy sometimes, you can't tell if it means a content hierarchy, or just meaningless grouping so you can't ignore all the wrappers. Anyway this is kindda off topic now, there should be a better place to discuss that matter. Thanks for your helpful feedback nonetheless :D – Af

@Af sorry, clicked on the chat suggestion by mistake, and no issue, it depends from user to user :) happy coding – Mete

Why do you use display: table instead of display block? – Everard

Answer 2

You have to use the clear property.

For your example:

.child:nth-child(3) {
    clear: both;
}

In jsfiddle.

Precontract

The same answer of Mr.Alien – Gennie

Answer 3

adding a clear:both; in the 3rd child helps:

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

Agitate

The same answer of Mr.Alien – Gennie