- Float: Let the element float, the values are: left (floating left), right (floating right).
- Clear: Clear the floating, the values are: left (clear the left floating), right (clear the right floating), both (clear the left floating and right floating above).
1. CSS float
l The floated element will float to the left or right, until the edge of the surrounding element, or the edge of the previous floated element
l Floating elements no longer occupy space, and the level of floating elements is higher than that of ordinary elements.
l Floating elements must be "block elements". No matter what element it was originally.
l If the floated element does not have a specified width, it will be as narrow as possible after being floated. Therefore, floating elements generally have a fixed width and height.
l Multiple elements in a row, to float together, or not to float
The function of floating elements: It can realize the side-by-side display of multiple block elements.
1. CSS floating clear
You need to use the clear float action below the floated element. clear:both | left | right;
Or use in parent element. overflow: hidden;
- There are two functions of CSS to clear the float: (1) it can make the surrounding element "visually" wrap the floating element, (2) the other elements under the clear will restore the default typesetting.
- If there is a float, there must be a clearing.
- If the enclosing element (with only floated elements inside and no other content) has a height specified, then the clearing function can be omitted.