First, the concept of floating
A floating box can be moved left or right until its outer edge touches the border that contains the box or another floating box.
Because the float box is not in the normal flow of the document, the block box in the normal flow of the document behaves as if the float box did not exist.
Second, the impact of floating
1. Floating causes a high collapse of the parent element
There are children in the parent element, and the height of the parent element is not set, so the child elements float in the parent element. The result is that the height of the parent element is zero, which causes the height of the parent element to collapse.
Floats are out of the document stream. This problem can have a big impact on the layout of the page. To solve the height collapse problem, we need to clear the float.
Three, the removal of floating
1. The empty label for the clear property
Add an empty tag after the float element
and set it in CSS. Clear {clear:both; }, can clean up the float.
- How it works: Add an empty tag and use CSS to raise the clear:both float so that the parent element can automatically get to the height
- Pros: simple, less code, compatible with all browsers
- Disadvantages: Adding tags to the page, causing confusion in structure
- Recommendation: Not recommended, this method is outdated
2. :after pseudo-elements
Add a Clearfix class to the container for the floating element, and then add another to the class: After the pseudo-element implementation element, add an invisible Block element to clean up the float.
- How It Works: Using CSS pseudo-elements, add an invisible space “/20” or dot “after the inner element of the container.” , and set the Clear property to clear the float.
- Pros: Good browser support
- Cons: The Clearfix class requires adding Zoom: 1 (triggering HasLayout) to support IE6 and IE7 browsers
- Recommendation: Recommended use, set public classes, reduce CSS code
To read more