The thirteenth day of learning programming

Height collapse:
The height of the parent element is generally stretched by the child element or the content. If the child element is set to float, the child element will be separated from the document flow and cannot support the height of the parent element, thusCauses the height of the parent element to be lost and the page layout is chaotic
Solution 1 to solve the height collapse:
Set the height of the parent element
This method is not recommended
The implicit attribute in the page element: Block FormattingContext is the block formatting context, referred to as BFC
When the BFC of the element is turned on, the element will become an independent layout area, and will not affect the layout of the outside elements
BFC is understood as a closed big box, elements inside the box will not affect the outside.
After BFC is enabled, the element will have the following characteristics:
1. The vertical margin of the parent element will not overlap with the child element (to solve the problem of overlapping parent and child margins)
2. The element with BFC enabled does notIt will be covered by floating elements
3. Elements with BFC enabled can contain floating child elements (can solve height collapse)
How to enable BFC of elements
1. Set element floating (not recommended)

• Using this method to open, although the parent element can be stretched, it will cause the width of the parent element to be lost
  And using this method will also cause the lower element to move up, which cannot solve the problem
  2. SettingElement is inline-block (not recommended)
• It can solve the problem of height loss, but it will cause width loss, and there will be a three-pixel blank, which is not recommended
  3. Set the overflow of the element to a non-visible value
  The side effects are relatively small, it is recommended to use
  4. Set the absolute positioning of the element (not learned yet) The
  element will also be separated from the document flow. Although it can stretch the parent element, it will cause the width of the parent element to be lost.
  and useThis method will also cause the element below to move up, which cannot solve the problem.
  Recommended method: Setting overflow to hidden is the way to enable BFC with the least side effect.
  Sometimes we want to clear the influence of other floating elements on the current element, then we can use clear to complete the function
  clear can be used to clear the influence of other floating elements on the current element
  Optional value:
  none, the default value, does not clear the floating
  left, clears the influence of the left floating element on the current element
  right, clears the influence of the right floating element on the current element
  both, clears the floating elements on both sidesInfluence on the current element
  Clear the float of the element that affects him the most
  Solution 3 for height collapse:
  You can directly add a blank block element at the end of the height collapsed parent element,
  Since this block element is not floating, it can stretch the height of the parent element,
  and then clear the floating, so that the height of the parent element can be stretched through this blank block element,
  > Basically no side effects
  Although this method can solve the problem, it will add redundant structure to the page.
  When the element is set to float, it will be completely separated from the document flow, and some characteristics of the element will also be changed.
  The characteristics of leaving the document flow
  Block element:
  1: The block element no longer occupies a single line of the page.
  2: The width and height of the block element are stretched by the content
  Inline elements:
  1: The floated inline elements are more like inline block elements, because multiple lines can be displayed, and the default width is the content of the contentWidth
  Summary: When the element is set to float and is separated from the document flow, there is no need to distinguish between block and inline