Floating boxes are the most used in modern layouts. The theory of floating boxes was used especially in grid systems and inline lists in CSS frameworks. For example, class and mixin inline lists (in the Zurb Foundation framework) are based on floats.
Elements can be floated to the left and right side. Of course, there is a method to reset floats too. The possible values are as follows:
float: left; // will float element to left float: right; // will float element to right float: none; // will reset float
When you are using floating elements, you can have some issues. The most known problems with floated elements are as follows:
Too big elements (because of width, margin left/right, padding left/right, and badly counted width, which is based on the box model)
Not cleared floats
All of these problems provide specific effects, which you can easily recognize and then fix.
Elements which are too big can be recognized when...