Understand floating elements-how to use them, what their problems are, and how to solve these problems.

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.