CSS style float Clear detailed

Reproduced

The Float property in CSS is a frequently used property, and for beginners, if you do not understand the meaning of floating and the characteristics of the performance, the use of the use is easy to fall into confusion, foggy, confused state. This article will start with the most basic knowledge, talk about floating applications, problems and solutions. Basic Knowledge

float, as the name implies, floats, the element that sets the float property floats to the left or right according to the property value, and we call the element with the Float property set as a floating element.
The floating element is detached from the normal document stream, but the floating element affects not only itself, it affects the surrounding element alignment. Examples are as follows:
HTML code: XHTML

1 2 3 4 5 6

<div class = "box" > <span class = "Float-ele" > Floating elements </span> Normal documents Flow Plain document flow Ordinary document flow ordinary document flow ordinary document flow ordinary document flow ordinary document flow ordinary document flow ordinary document flow Ordinary documents stream ordinary file flows normal document flow ordinary documents flow ordinary flow Normal document stream Normal document flows general document streaming general flow of the text documents stream </div>

CSS code: CSS

1 2	. box {background: