Solution to height collapse after setting float:

Solution to height collapse after setting float:

1. Setting a fixed height of the parent element: Inflexible, the usage scenario is relatively simple, and it is generally used for modules such as navigation bars that will not change the height of the page later. Not recommended

2. Inner wall method: add an empty block-level element behind the floating element, without words or other content. Just set the clear: both; attribute. The clear attribute literally means clearing, and both means clearing the impact of floating elements on my left and right sides. The advantage is that the parent element can still dynamically calculate the height and include the height of the floating element, but the disadvantage is that there is an extra div to clear the float. This will result in redundant page structure. Not recommended

3. Pseudo elements float clearly: Pseudo elements are a solution that will not appear in the page structure, but will still make the wall method effective.

      clear-fix::affter{
    
    
      content:"xxxafa";
      display:block;
      clear:both;
      overflow:hidden;
      height:0;
         }

content:"xx"; .clear-fixThe type selector corresponds to the inside of the label, and a content is added to the last line, with the default inline style.
display:block;The default content is inline style. Unable to meet the requirements of the Interior Wall Act. You need to set the pseudo-element as a block-level element.
clear:both;The clear floating method must be written
overflow:hidden;height:0;because we don't need the element itself to be displayed, we just want to use the element settings clear:both；to clear the floating, so the height is set to 0 and
the overflow is set to hidden.