floating

  1. Float out of the flow of the document, but it still affects the layout, such as text surrounding (unlike absolute)
  2. Floating elements have the properties of block-level elements.
  3. Margins around floating elements do not collapse. (landing)
  4. The concept of holding blocks, block-level ancestral elements.
  5. Floating elements overlap content: block-level elements have only content above the floating element, and the background borders of inline elements are all above it
  6. Clear float is when an element is added to handle floating elements nearby, clear: both

positioning

  1. static

  • Hold:

    1. Position: Absolute, contains the most recent ancestor element that is not static (of any type)
    2. Relative or static, containing blocks defined for the nearest block-level element
  1. Absoulte: The element box is removed from the document stream to accommodate relatively fast positioning.
  2. Relative: indicates a certain distance.
  3. Fixed: Similar to Absolute, accommodate block is viewport itself.
  4. Sticky: Similar to Absolute, a block containing sticky is an ancestor element.