Floating elements and overflow

elements: one is float: right and the rest is float: none.

If you set overflow: hidden on a float: none box it will not overlap the floating siblings. In this screenshot, the semi-transparent red box is float: right, and the yellow box is overflow:hidden

And here you what happens when overflow: visible is applied to the yellow box:

Play it on JSBin This is because elements with overflow: hidden estabilish a new block formatting context and

The rules for positioning and clearing of floats apply only to things within the same block formatting context. Floats do not affect the layout of things in other block formatting contexts

I played with it to build a search bar that expands to fill the remaining space:

JS Bin