What is the prefered way of clearing floated content?

Question

I am wondering what is the prefered way of escaping floats nowadays.

I have usually added a div with clear: both property after the floaters but there are many more.

I would like to know what is the clean solution usually prefered by professional developers?

Nothing wrong with that, if it works and is simple, stick with it. — Kyle, Oct 15 '11 at 15:13

Brent · Accepted Answer · 2011-10-15T15:32:23.100

4

I usually use overflow: hidden on the element containing the floated elements, and for the times that I need overflow to be set to something other than hidden, I use the .clearfix class as mentioned by @Lapple.

edited Oct 15 '11 at 15:32

answered Oct 15 '11 at 15:20

Brent

2,961
1
17
18

@Lapple Ha, sorry. Resolution is getting too small or I'm getting too old. – Brent Oct 15 '11 at 15:33
I will choose this as best since I knew this method and how good and clean it was. I will start to use it - always thought there are some issues with it. – HNikolas Oct 16 '11 at 06:20
@HNikolas Just issues if you want overflow to be visible, scroll, or something other than hidden. – Brent Oct 16 '11 at 13:08

Lapple · Answer 2 · 2011-10-15T15:22:42.890

2

Here is a .clearfix magic, used in HTML5 Boilerplate:

.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

And you can probably start using display: inline-block nowadays, or not?

edited Oct 15 '11 at 15:22

answered Oct 15 '11 at 15:13

Lapple

3,385
20
20

What is the prefered way of clearing floated content?

2 Answers2