Css Float

Clearing Float Elements by Eric on February 1, 2020

As you develop web pages you may come across moments when you need to float an element.  Using the CSS float you can make elements be pushed around to make room as more elements are added.    A nifty feature in and of itself but there is a common problem that tends to crop up. Recently I was working on a small navigation header that included two buttons and a search box.  The buttons were standard button elements and the search box had been floated to move with the varying size of the screen.  The problem that happened came when you made the screen too small and the floated box dropped to the next line.  Directly beneath this row of elements was a header row that had a background and when the search box dropped down it would be hidden by this header instead of pushing the header down as would be expected. After doing some research into float elements I came across this question on StackOverflow asking What is the best way to clear the CSS style "float"?  In it the top answer expla...