Properly clear floating elements

Question

I am trying to design a bar in which all elements are floating. I have no problem to do this part, but the problem is, when I try to add a new block under this one, I have either a space before my first element in this new block, or a space between my two blocks when I add clear: both;.

I already tried with new clearfix hack, but it does not work in my case.

Here is a small codepen I made, to show you the problem I have : http://codepen.io/anon/pen/piDEK. I would like to avoid to have a space between my two blocks, and my h1 should be at left (and not after my ul, you can try by removing the clear, in my codepen), obviously.

Thank you for your help.

Answer 1

you can clear float by giving overflow:hidden; on parent element. check the DEMO.

Like in your case use in on section element.

section{overflow:hidden;}