标准布局总是这样从左到右、从上而下的顺序排列。但当我们要实现一些特殊的的布局效果时就没法了，这时的办法就是 —— ??脱离文档流。

??脱离文档流，就是从正常文档流中移除，文档流布局就不考虑他了，也就不会占用空间。基本上可以这样理解，当然也不是绝对就没人管了，他的父容器还是管的，至于怎么管看《格式化上下文》。

常用的脱离文档流的方式：float、position

• float浮动，会使元素脱离文档流，移动到容器左/右边，后面元素会围绕浮动元素。
• position定位，绝对定位（absolute）、固定定位（fixed），会使元素脱离文档流，空出来的位置被后续元素代替，所以会出现和其他元素重叠的问题。

1.2、display布局属性

正常流中的所有元素都有一个display的值，这个属性允许我们更改默认的显示方式。display用来设置多种布局方式，可让不同元素类型（行、块元素）转换。

span元素2  
div元素
 

02、什么是响应式布局？

2.1、响应式设计

响应式网页设计（responsive /r??sp?ns?v/ web design，RWD）指的是允许 Web 页面适应不同屏幕宽度等因素，进行布局和外观的调整的一系列实践。它涵盖了很多 CSS 和 HTML 的功能和技术，现在也基本是我们默认建设网站的方式。

如上图，基于媒体查询和现代布局，响应式设计成为当下的主流。通过媒体查询测试，针对不同的尺寸适配不同的CSS样式、图片，如调整字体大小、段落填充、菜单按钮布局、以及增大触摸按钮的大小等，让网页能够自适应各种设备尺寸、设备类型。

• 响应式图形，创建多种尺寸版本文件，基于srcset、sizes，适配合适尺寸的文件。或者改用新的 元素。

• 响应式排版，传统方式可以结合vw单位（视口的1%）、固定尺寸rem、px单位，现在可以基于媒体查询设置不同样式规则。

.p1 {
    font-size: calc(1rem + 2vw);
}
@media screen and (min-width:1440px) {
    .p1 {
        font-size: 150%;
    }
}

• 视口元标签，明确视口的宽度为设备的宽度，并初始化缩放比例为1，建议添加如下元素申明。

2.2、@媒体查询

媒体查询是指针对不同的设备、特定的设备特征或者参数进行定制化的修改网站的样式，媒体查询的标准语法：

@media media-type and (media-feature-rule) { /* CSS规则 CSS rules go here */ } ??/* 注意关键字and后面的空格 */

/* 媒体查询：在大尺寸模式启用flex布局，横向排列 */
@media screen and (min-width: 40em) {
    .nav ul {
        display: flex;
    }
    .nav li {
        flex: 1;
    }
}

响应式布局-代码示例（Codepen）

03、CSS的格式化上下文

所有元素都是一个盒子Box，盒子Box是页面布局的基本单位，盒子的不同类型决定了他的布局方式。一个页面由各种盒子的组合、嵌套形成。这些盒子各不相同，有些是横排，有些竖排，有些是弹性，有些是网格，那他们是如何布局的呢？这就必须要了解的一个概念——格式化上下文。

格式化上下文（Formatting Contexts），就是把页面内容分为多个不同的格式化上下文（区域），每个格式化上下文都是一个独立的渲染（布局）区域，存放同类型的盒子。根据盒子的不同，格式化上下文分为多种（四种）类型，每种类型有自己的渲染规则，决定了其内部子元素的定位、排列方式。

实际上这些格式上下文也是相互嵌套的，各自负责各自区域进行渲染（布局）。

上图仅为个人理解。

04、BFC-块级格式化上下文

Block fomatting context （= block-level box + Formatting Context），块级格式化上下文，简称 BFC。是一个独立的渲染（布局）区域，用于给块级盒子布局，包含的都是块级盒子。

??基本规则：

• 块级元素：首先BFC本身也是“块级盒子”（当然实际DOM中并没有这个盒子元素），其内部也都是块级元素盒子。
• 独立主权：该区域的内部无论有什么东西、如何排列、在干什么，都不影响其外部，反之亦然。
• 垂直排列：BFC内部的Box垂直排列，从上往下依次排列。
• 垂直 margin 重叠：垂直方向间距由margin决定，同一BFC内相邻的Box的margin重叠，看谁的大就谁的。so，不是在同一个BFC则不会发生边距重叠。
• 左边距，BFC中每个盒子，都是从其父容器Box的左边界开始，包括浮动元素也是这样。
• 不会重叠：BFC区域不会与浮动盒子（float box）重叠，会向后找新的区域排列。注意?，这是解决浮动盒子重叠的关键。
• BFC高度：计算BFC高度时，会包含浮动元素（float box）。注意?，这是解决高度坍塌、清除浮动的关键。

??如何触发BFC？

• html 根元素，最大的BFC。
• float 浮动：left、right，脱离了文档流，自成一派。自成一个独立BFC，它的内部是正常流布局。
• position 定位：absolute、fixed，脱离了文档流，自成一派，同float浮动一样。
• overflow 溢出，属性值不为 visible，常用 overflow: hidden 触发容器为BFC。
• display 值：一个块级盒子，为独立BFC区域：
  • 行内块级盒子：inline-block
  • 表格类盒子：table、table-cell、table-caption、inline-table
  • 弹性盒子：flex 、inline-flex
  • 网格盒子：grid 、inline-grid

??注意：上面这些场景会触发创建块格式化上下文，而不是这些盒子本身。

??使用场景

BFC主要还是浏览器用来渲染布局用的，在实际开发中可以利用他的这些规则做哪些事情呢？—— 处理浮动float布局的烂摊子！

① float导致的高度塌陷

? 问题：如果一个块级盒子如