Elements that need to be floated can use the Float property in the CSS to define the floating position of the element, left: floating to the right.
Issues caused by floating elements:
(1) The height of the parent element cannot be stretched, affecting elements that are siblings of the parent element
(2) A non-floating element that is similar to a floating element follows
(3) The element before the element also needs to float, otherwise it will affect the structure of the page display, unless the first element floats
Workaround:
Using Clear:both in CSS, properties to clear the floating of elements can solve 2, 3 problems, for problem 1, add the following style to the parent element to add the Clearfix style:
. Clearfix:after{content: "."; Display:block;height:0;clear:both;visibility:hidden;}
. Clearfix{display:inline-block;} /* for IE/MAC */
Understand floating elements-how to use them, what their problems are, and how to solve these problems.