The specific introduction of several ways to clear floats in CSS

What is floating?

Feature: The element that floats is not the space of the standard flow, but it affects the layout of the text in the standard stream. Floats only floating around.
2--the position of floating element A is related to the previous element. If the previous element has a float, the top of a is aligned with the top of the previous element, and if there is no float, it is aligned to its bottom.
3--a child box in a parent box, if one of the children has a float, the other children need to float to be displayed on a line.
After the 4--element floats, if you do not set the width height, the element will have the property of the inline block element depending on how much of the content is set.
After the 5--element floats, if the parent element does not have a height set. Causes the parent element to collapse highly.
Solve this problem?
-----Adding attributes to the parent element: Overflow:hidden; hidden parts

Overflow properties:
How the content is displayed when the element inside the box exceeds the size of the sunspot itself
Visible: content is not trimmed and is rendered outside the element box (default)
Hidden: will be trimmed to hide, you can use this property to clear the floating
Auto: Adaptive display scroll bar
Scrol: Content is trimmed, scroll bar is displayed

Bfc
Overflow can trigger the element's BFC, can let the element have the layout space and the permission, in the BFC inside all the element all is the composition and the layout according to the parent element, all the parent element has the parcel nature, this is solves the high collapse problem the principle.
Floating, positioning, overflow, dispaly, table, Table-cell can trigger BFC.

Clear float:
--the element is displayed in the standard stream only when there are no floating elements on either side of the current element.
--Four ways to clear the float:
1. Use empty markers to clear the float, partition. Add tags.
Add a <p class= "Clearboth" ></p> on the back of the floating label, do not set the width height and then set the. Clearboth{clear:both}, and then place the desired label behind this empty label
2. Use the overflow property to clear the float. will be hurt.
Overflow:hidden;
3. Using after pseudo objects to clear floating
4. Use before after pseudo-object to clear floating
Clearfix (2,3,4 in the form of a combination, commonly used).

The Clearfix   parent box is wrapped around the box, triggering BFC to clear the front and rear floats.   . clearfix{      display:table;<!--trigger DFC   --}. clearfix:before,.clearfix:after{      content: "" ;      Display:block;      Clear:both;      height:0;   }   Display:table in IE6; The DFC cannot be triggered, so it is triggered in the following way   . clearfix{      _zoom:1;   

Usage:

<p class= "Top" >top</p><p class= "Clearfix" >    <p class= "left" >left</p>    <p Class= "right" >right</p></p><p class= "Bottom" >bottom</p>

.clearfix{display:table;/* triggers NFC */}. clearfix:before,.clearfix:after{/* Add an empty label before and after clear floating */content: "";d isplay:block;height:0;clear:both;}. clearfix{_zoom:1;/* for compatibility with IE6 */}