Css clear float, css float

Css clear float, css float

Float in css:

Float: left floating

Float: right float

Float: none does not float

Float: inherit inherits floating (inherits floating attributes of the parent element. If the parent element does not have floating attributes, inherit becomes invalid)

What are the problems caused by floating: 1. Parent element collapsed, with no height. 2. the Adjacent Elements in the webpage are ectopic.

Several Methods to clear floating:

1. manually add height disadvantages to the parent element: if the number of child elements is too large and the number is not sure, the setting is complicated.

<! DOCTYPE html> 
2. Use the clear attribute
<! DOCTYPE html> 
3. Add the overflow attribute to the parent element and use it with zoom: 1.
<! DOCTYPE html> 
4. disadvantages of adding float to the parent element: the position of adjacent elements is abnormal.
<! DOCTYPE html> 
5. Use: after pseudo element
<! DOCTYPE html>