If you want to do a good job, you must first sharpen your tools. When we encounter problems, we should first ask a few more why?
What is height collapse? What is height collapse? What is height collapse?
* In document flow, the height of the parent element is supported by the quilt element by default, * that is, the height of the child element is the height of the parent element. * However, when the child element is floated, the child element is completely removed from the document flow. * This will cause the child element to be unable to support the height of the parent element, causing the height of the parent element to collapse. * As the height of the parent element collapses, all elements under the parent element will move up, resulting in a messy page layout. * We can write down the height of the parent element to avoid the problem of collapse. * But once the height is written down, the height of the parent element will not automatically adapt to the height of the child element, so this scheme is not recommended.Copy the code* According to W3C standards, elements in a page have an implicit property called Block Formatting Context * or BFC, which can be turned on or off. The default is off. * When the BFC of an element is enabled, the element has the following properties: * 1. Vertical margins of parent elements do not overlap with child elements * 2. Elements with BFC enabled are not overwritten by floating elements * 3. The element that turns on the BFC can contain floating child elements * * how to turn on the element's BFC * 1. Float the element * - this will spread the parent element, but it will lose the width of the parent element * and it will cause the elements below to move up, which does not solve the problem * 2. 3. Setting the element to inline-block * - will solve the problem, but will cause width loss and is not recommended * 4. Set element overflow to a non-visible value * * Recommended approach: Setting overflow to Hidden is the least adverse way to turn on the BFC. */ /*overflow: hidden; */ /* * However, IE6 and below browsers do not support BFC, so using this method is not compatible with IE6. In IE6, there is no BFC, but there is another implicit property called hasLayout. This property is similar to the BFC property. You can use hasLayout in IE6 to solve this problem. */ /* * Zoom :1 means not to zoom in, but hasLayout * zoom is enabled with this style, which is only supported in IE. */ zoom:1 is not supported by other browsers; overflow: hidden; /* * Solution 2: * Add a blank div at the end of the collapsed parent element. * Since the div is not floating, it is possible to inflate the parent element's height. * Then float it. * There are few side effects * * Using this approach solves the problem, but it adds extra structure to the page. */ /* You can add a blank block element to the end of the element using the after pseudoclass, and then clear the float. This works the same way as adding a div. * It also doesn't add extra divs to the page, which is our most recommended method with few side effects */.clearfix:after{/* Add a content */ content:""; /* Convert to a block */ display: block; /* Clear both sides of the float */ clear: both; } /* * IE6 does not support after pseudo-classes, * so IE6 also needs to use hasLayout to handle */. Clearfix {zoom:1; }Copy the code