<!-- float:left向左浮动。光使用display:inline-block会产生缝隙 -->

    <!-- 给.a和.b设置同一种样式，就可以.a,.b{} -->

    <!-- float:left脱离了标准流布局，给父盒子造成了塌陷。必需要在其父元素加上overflow:hidden可以解决造成的塌陷问题，但如果是下拉列表的情况下超出的会隐藏

    也可以给父盒子内添加一个div style:clear:both清除两边浮动 -->

    <!-- .a:after{ content: '';

            display: block;

            clear: both;}    这是第四种方式解决盒子塌陷-->

<!--   position的默认值是static 标准流布局展示的   position:aboslute -->

  <!-- 因为父元素是aboslute，子元素也是aboslute，子元素会以父元素为基准。但是父元素使用绝对定位脱离文档流。所以标准流布局就会显示在绝对定位的下面。所以使用relative和aboslute相结合的方式 -->

  <!-- position:fixed固定定位,与文档流无关，不占据空间 -->

  <!-- z-index默认是0，relative，aboslute，fixed都可以用这个提升层级-->

* absolute绝对定位，脱离了标准的文档流，设置之后前面的会被后面的盖住 */

<!-- 内部是绝对定位，父盒子也是绝对定位，就会以父盒子进行定位。如果父盒子不是绝对定位，就会以body为基准定位  -->