可见格式化模型

可见格式化模型

外边距折叠

常规块盒子有一种机制叫作 外边距折叠

垂直方向上的两个外边距相遇时，会折叠成一个外边距。折叠后外边距的高度等于两者中较大的那个高度

外边距折叠只发生在文档常规文本流中块级盒子的垂直方向上

包含块

如果元素的定位方式为静态定位（position: static）或相对定位（position: realtive），则包含块的边界就计算到一个最近的父元素

该元素的display属性值必须能提供类似块级的上下文，如 block, inline-block, table-cell, list-item 等

默认情况下，width, height, margin 和 padding 的值为百分比时，就以该父元素的尺寸为计算依据。如果当前元素的定位模型改成了 absolute 或 fixed，那么计算依据就会发生变化

相对定位

相对定位的元素仍然会在文档流中占用初始的空间，但可以应用平移属性。

因此，这样平移元素会导致它遮挡其他元素

绝对定位

绝对定位会把元素拿出文档流，即不会再占用原来的空间

绝对定位元素的包含块是距离它最近的定位祖先，即 position 属性设置为 static 以外任意值的祖先元素

绝对定位的盒子脱离了常规文档流，因此很难使用它们创建随视口（viewport）宽度和内容长度变化而变化的自适应或响应式布局

固定布局

固定定位元素的包含块是视口（viewport）

固定定位可用来创建始终停留在窗口相同位置的浮动元素

很多网站都使用这个技术让导航区始终保持可见，有的固定侧栏，有的固定顶栏

浮动

浮动就是为了在网页中实现**文本环绕图片的效果而引入的一种布局模型 **

浮动会导致内容高度缺失，有如下解决方案：

• 利用 clear 样式属性（clearFix）

  .clearFix::after {
      content: '';
      display: block;
      clear: both;
  }

• 利用块级格式化上下文

  块级格式化上下文，规定了页面必须自动包含突出的浮动元素，而且所有块级盒子的左边界默认与包含块的左边界对齐。

  有如下规则允许元素建立内部的块级格式化上下文：

  • display 属性值设置为 inline-block 或 table-cell 之类的元素，可以为内容创建类似块级的上下文；
  • float 属性值不是 none 的元素；
  • 绝对定位的元素；
  • overflow 属性值不是 visible 的元素；

内在大小 与 外在大小

contain-floats 属性，使用这个关键字，可以仅通过以下代码就让元素包含浮动：

.myThing {
    min-height: contain-floats;
}

但是，目前支持这个关键字的浏览器还是较少，小心使用