Web page css height collapse and solution

This blog post aims to record the abnormal display of page elements due to the collapse of CSS height when creating a web page, and record the solution, which can provide guidance for the next time you encounter this problem.

1. Floating

When making web pages, in order to arrange multiple block-level elements in a row from left to right, you need to use floating positioning. The properties of float are left or right. However, the floating element will be separated from the document flow, so that it does not occupy the page space, and will have a certain impact on the height of the parent element. If an element contains all child elements that are floated, the element height will become 0 ( CSS height collapse ).

2. The effect and influence of floating

  1. Floating positioning elements will be excluded from the document flow, that is, out of the document flow (not occupying page space), and the rest of the elements will be filled up.
  2. Floated elements are docked to the left or right of their parent element, or to the edge of other floated elements (elements can only float on the current row).
  3. The floated element remains inside the parent element.
  4. Floating Element Handling Issues – Resolved an issue where multiple block-level elements were displayed on a single line.

Three, the solution to clear the floating effect

The more common classic solution: a single pseudo-element after clears the floating effect (turns on the element’s BFC).

That is, add a clearfix class name to the parent element that is affected by the float, and then add the following CSS code:

.clearfix ::after {
   content : "" ; /* The generated content is empty*/ 
  height : 0 ; /* The height of the pseudo element is 0, and it does not affect other elements*/ 
  font-size : 0 ; /* The font size of the pseudo element is 0 */ 
  display : block; /* The generated element is displayed as a block-level element*/ 
  clear : both; /* Clears the effect of floating the previous element*/ 
  visibility : hidden; /* Make it invisible*/
}

.clearfix {
   zoom : 1 ; /* ie6 elements do not have BFC mode, but this code will enable hasLayout mode in ie6, which is only supported in ie*/ 
}

Fourth, the example of clearing the float

4.1 Page Element Structure

The floating types with the class names of span1, upload, recognition, result, and correct are all float:left, and the floating causes the background image height of its parent elements, namely row and pageheader, to collapse, resulting in incomplete display.

4.2 Clear the page effect before floating

4.3 The page effect after clearing the floating

4.4 Clear the CSS code added by the floating effect

/* There is a div container with class name pageheader outside the row, and a div container with class name whitebg inside, */ 
/* The div container with class name span1 is set with float:left floating style, and the outer class name is pageheader The div container cannot be opened because there is no clear inside. */ 
/* Clears the floating effect, does not destroy the document structure, and has no side effects. */ 
.clearfix ::after {
   content : "" ; /* Generated content is empty*/ 
  height : 0 ; /* Pseudo element height is 0, does not affect other elements*/ 
  font-size : 0 ; /* Pseudo element font Size is 0 */ 
  display : block; /* The generated element is displayed as a block-level element*/ 
  clear : both; /* Clears the effect of the previous element's floating effect*/ 
  visibility : hidden; /* Make it invisible*/
}

  /* The ie6 element has no BFC mode, but this code will enable the hasLayout mode in ie6, which is only supported in ie*/ 
.clearfix {
   zoom : 1 ;
}

Leave a Comment

Your email address will not be published. Required fields are marked *