小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

定位

浮动

高度塌陷

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>高度塌陷</title>
  <style>
    .container {
      border: 1px solid #000;
    }

    .box1,
    .box2 {
      width: 200px;
      height: 200px;
      float: left;
    }

    .box1 {
      background-color: lightseagreen;
    }

    .box2 {
      background-color: lightskyblue;
    }

    /* 
      解决高度塌陷问题(开启BFC - Block Formatting Context, 块格式化上下文)
      * BFC在默认情况下是关闭的
      * 开启BFC之后, 相关于在某个区域内和外部进行隔离
      * 开启BFC的方式
        * 将元素设置为浮动(脱离文档流)
        * 将元素设置为绝对定位(脱离文档流)
        * 将元素设置为行内块级元素(水平排列、元素之间存在空白区域)
        * 将块级元素的overflow属性设置为非visible的值(同时导致内容溢出的问题)
      * 注意: 每一种开启BFC的方式, 都带有副作用
     */
    .clearfix::after {
      content: "";
      clear: both;
      /* 将该元素设置块级元素 */
      display: block;
      /* 将该伪元素进行隐藏 */
      visibility: hidden;
    }
  </style>
</head>

<body>
  <!-- 
    高度塌陷的问题:
    * 不设置父级元素的height属性
    * 子级元素设置为浮动
   -->
  <div class="container clearfix">
    <div class="box1"></div>
    <div class="box2"></div>
    <!-- 为了解决高度塌陷的问题, 专门定义一个元素 -->
    <!-- <div class="clear"></div> -->
  </div>
</body>

</html>

绝对定位

这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。

absolute：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。
relative：生成相对定位的元素，相对于其正常位置进行定位。
static：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit：规定应该从父元素继承 position 属性的值。