Why doesn't float work?

Question

css

Why does b-navbar__search (Red block with text "Icon") not float in this example?
Example

Answer 1

If you want text to wrap around it, then swap the b-navbar__nav-cell and b-navbar__search elements . Because floating elements wrap around elements below them.