第八篇 css - 布局 - 【 浮动布局 + 定位布局 + flex 伸缩盒布局 + grid 网格布局 】

普通流

文档流 流式布局  分为 

  1、普通流
  
  2、定位流
  
  3、浮动流

不同流内的 块级元素 和 行内元素 的 布局方式 不同

布局方式用 FC 格式化上下文 来命名
  
  1、块级格式化上下文  【 BFC 】
  
  2、内联格式化上下文
  
  3、层叠格式化上下文
  
  4、灵活格式化上下文

块级格式化上下文 BFC

什么是 BFC 

  1、BFC 又叫 块及格式化上下文

  2、BFC 是一个独立的布局环境，其中的元素布局是不受外界的影响
  
  3、在一个 BFC 中，块盒 与 行盒 都会垂直的沿着其父元素的边框排列
  
  4、可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。
  
  5、浮动元素 、绝对定位元素、非块级盒子的块级容器（如 inline-blocks table-cells 和 table-captions），以及 overflow值 不为 visiable 的 块级盒子，都会为他们的内容创建BFC（块级格式化上下文）
  
BFC 触发条件

  1、根元素，即 HTML 元素
  
  2、float 的值不为 none
  
  3、overflow 的值不为 visible (overflow 的其他值：hidden、auto、scroll)
  
  4、display 的值为inline-block、table-cell、table-caption、flow-root、flex或者inline-flex
  
  5、position 的值为 absolute 或 fixed
  
BFC 的作用

  1、解决 外边距折叠 问题
  
    什么是外边距重叠 ？
    
    在同一个 BFC 【 HTML 也是一个 BFC 容器】 中，在垂直方向上，相邻两个盒子的 margin 会重叠，值取两者中较大的
    
      解决核心 外边距重叠 就是 把两个相邻的盒子设置为不同的 BFC 
      
   2、解决浮动 高度塌陷 问题  
     
     什么是 高度塌陷 ？
     
     当给 子元素 设置 浮动 的时候，子元素会脱离文档流，如果父元素没有设置高度，那么父元素就没有了高度值了
     
       解决核心  => 清除浮动
       
         1、浮动元素的父元素触发 BFC，形成独立的块级格式化上下文 (BFC)
         
         2、浮动元素的父元素高度为 auto
         
    3、清除浮动 
    
      触发 BFC 能够清除浮动 原理和上面 高度塌陷 一样
      
    4、阻止元素被浮动元素覆盖遮挡问题  
    
      触发 BFC 能够 阻止元素被浮动元素覆盖遮挡问题 原理和上面 高度塌陷 一样 

清除浮动

浮动 定义 为 浮动的框 可以向左或向右移动，直到它的 外边缘 碰到 包含框 或 另一个浮动框 的边框为止

1、clear: both

在最后一个浮动元素后面 添加一个 冗余元素，然后将其设置 clear:both

注意 即在父级元素末尾添加的元素必须是一个块级元素，否则无法撑起父级元素高度

	<div id="wrap">
	    <div id="inner"></div>
	    <div style="clear: both;"></div>
	</div>
    
        #wrap{
	      border: 1px solid;
	}
	#inner{
	      float: left;
	      width: 200px;
	      height: 200px;
	      background: pink;
	}

2、伪元素清除浮动  ::before 或者 ::after  兼容性好

   1、浮动元素的父容器添加一个 clearfix 的 class

   2、然后给这个 class 添加一个 ::after 伪元素，实现元素末尾添加一个看不见的块元素来清理浮动

   3、这是通用的清理浮动方案，推荐使用
   
   4、给父元素触发 BFC  【 overflow: hidden 】

浮动布局 - float

1、CSS 中 浮动属性 float 设计的初衷是为了解决页面展示样式时需要文字环绕图片的场景，类似于 Word 中的文字环绕属性

2、float 属性有

 1、left
 2、right
 3、none
 4、inherit
 
3、使用 float 会脱离常规流，成为浮动流，并有其自己的定位规则；

4、浮动带来的问题 -- 高度塌陷

5、浮动会脱离标准流（没有完全脱离文档流）

  1、如果一个元素浮动了，那么它就脱离了标准文档流，后面的元素就让向上排，如果后面的元素内部有文字，这些文字会环绕在浮动元素的周伟，产生字围
  
  2、浮动的曲线：元素浮动了，先向上移动，直到贴靠到父元素的边界，接着，如果是左浮动，就向左移动，直到移动到父元素的左边界，如果是向右浮动，就向右移动，直接移动到父元素的右边界
  
  3、当一个浮动起来的盒子，没有设置 width ，那么这个盒子的宽高会尽可能小，小到包裹住它里面的内容 
  
  4、如果有左浮动，又有右浮动，那么你需要把右浮动的元素写在左左浮动的前面
  
6、对后面兄弟元素造成的影响 兄弟元素会向上移动

  解决：在受影响的元素上面的加 clear: both

定位布局 - position

1、什么是定位布局

  标准文档流和浮动布局都只能在水平或垂直方向布局元素，但现实是，我们可能需要在上下左右几个方向上同时偏移元素，定位布局正是为了解决这一问题而设计的

2、定位布局的实现

  通过设置元素的 position 属性，可以让元素处于定位布局中，并通过 left、right、top、bottom 属性设置元素具体的偏移量
  
3、定位布局的分类

  1、static 静态定位
  
     实际上所有元素默认都是静态定位的，即处于标准流中
  
  2、relative 相对定位
  
     1、元素保留在标准流中所占用的位置，但实际是边框及以内的部分将显示在偏移之后的位置。
     
     2、在相对定位中，实际上元素并未脱离标准流，所以浏览器还是会区分它是否是块级或其他类型的元素
     
     3、另外，设置元素的 margin 属性，实际上 margin 区域会出现在元素定位之前的位置。

  3、absolute 绝对定位
  
     1、元素脱离标准流，浏览器把它视作块级元素，不论定位之前它是何种元素，其他元素也将无视它
     
     2、绝对定位的偏移量是相对于其有定位属性的第一个祖先元素的
     
     3、另外，绝对定位的元素会自动忽略有定位属性的祖先元素的 padding 属性
     
  4、fixed 固定定位
  
     1、固定定位和绝对定位相似，但它的偏移量固定的相对于浏览器窗口
     
     2、它会脱离标准文档流，并且浏览器把他们一致视作块级元素
     
4、z-index 属性

   1、通常情况下，元素的 z-index 属性值都是 0 ，并且定位布局中的元素会覆盖标准流中的元素
   
   2、同在定位布局中的元素，写在后面的会覆盖写在前面的元素
   
   3、在定位布局中，可以设置它们的 z-index 属性来调整它们的覆盖关系，并且谁的值越大，显示优先级越高
   
   4、如果定位元素的父元素也设置了 z-index 属性，那么子元素的 z-index 属性将失效，最终是根据父元素的 z-index 属性来判断覆盖关系  

position 定位属性

position 属性的类型

  1、static  静态定位
  
  2、relative 相对定位
  
  3、absolute 绝对定位
  
  4、fixed  固定定位
  
  5、sticky 粘性定位
  
position  属性的特性

  1、static  静态定位
  
    1、元素遵循 标准文档流 中，属性值 top, right, bottom, left 和 z-index 属性失效
    
    2、将元素设置为 position: static 的唯一原因是强制删除应用于无法控制的元素上的某些定位
    
  2、relative 相对定位
  
    1、元素遵循标准文档流中，依赖 top, right, bottom, left 等属性相对于该元素在标准文档流中的位置进行偏移
    
    2、可通过 z-index 定义层叠关系
    
      此属性的主要功能就是引入了在该元素上使用 z-index 的能力
    
  3、absolute 绝对定位
  
    1、元素脱离标准文档流，使用 top, right, bottom, left 等属性进行绝对定位
    
    2、此属性是相对于最近 有定位属性 的父级元素的位置
    
    3、如果绝对定位元素没有定位的父级元素，它将使用文档 body 并随着页面滚动而移动
    
    4、可通过 z-index 定义层叠关系
    
      1、同一父级元素中，子定位元素 z-index 值大的在最上层
      
      2、如果定位元素的父元素也设置了 z-index 属性，那么子元素的 z-index 属性将失效，最终是根据父元素的 z-index 属性来判断覆盖关系 
      
  4、fixed  固定定位
  
     1、对象脱离标准文档流，使用 top, right, bottom, left 等属性进行固定定位
     
     2、相对于视窗定位，即使页面滚动，也始终停留在同一位置上
     
     3、固定定位元素不会在其所在的页面中留下间隙，其他元素会填补缺失的地方
     
     4、可通过 z-index 定义层叠关系
     
   5、sticky 粘性定位
   
     1、元素遵循标准文档流中，依赖 top, right, bottom, left 等属性相对于相对它的最近滚动祖先元素进行偏移，偏移值不会影响任何其他元素的位置
   
     2、基于用户的滚动位置定位，根据滚动位置在 relative 和 fixed 之间切换
     
     3、相对定位，直到在视窗中遇到给定的偏移位置，然后它固定到位，就像 position: fixed 一样   

伸缩盒布局 - flex

flex 可以使元素具有弹性，让元素可以跟随页面大小的改变而改变

参看 

  第一篇 css - 扩展 - flex 布局

grid 网格布局

Grid 布局即网格布局，是一种新的 CSS 布局模型，比较擅长将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系。

号称是最强大的的 CSS 布局方案，是目前唯一一种 CSS 二维布局

1、容器和项目

   我们通过在元素上声明 display：grid 或 display：inline-grid 来创建一个网格容器。一旦我们这样做，这个元素的所有直系子元素将成为网格项目
   
2、网格轨道

   grid-template-columns 和 grid-template-rows 属性来定义网格中的行和列。容器内部的水平区域称为行，垂直区域称为列
   
3、网格单元

   一个网格单元是在一个网格元素中最小的单位， 从概念上来讲其实它和表格的一个单元格很像
   
4、网格线

   划分网格的线，称为"网格线"。应该注意的是，当我们定义网格时，我们定义的是网格轨道，而不是网格线。Grid 会为我们创建编号的网格线来让我们来定位每一个网格元素。m 列有 m + 1 根垂直的网格线，n 行有 n + 1 跟水平网格线。比如上图示例中就有 4 根垂直网格线。一般而言，是从左到右，从上到下，1，2，3 进行编号排序。当然也可以从右到左，从下到上，按照 -1，-2，-3...顺序进行编号排序

Grid 布局和 flex 布局

flex 布局是一维布局，Grid 布局是二维布局

flex 布局一次只能处理一个维度上的 元素 布局，一行 或者 一列

Grid 布局是将容器划分成了 “行” 和 “列”，产生了一个个的网格，我们可以将网格元素放在与这些行和列相关的位置上，从而达到我们布局的目的

Grid 布局远比 flex 布局强大