CSS布局的三种机制

普通流(标准流)

• 块级元素会独占一行，从上而下顺序排列
  • 常见的有：div、hr、p、h1~h6、ul、ol、dl、form、table等
• 行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行
  • 常见的有：span、a、i、em等

浮动

什么是浮动：

设置了浮动属性的元素会脱离标准普通流的控制，移动到指定位置，设置了浮动的元素不占用以前的位置。

作用：

• 实现盒子的左右对齐

float: left;
float: right;

• 多个盒子(div)水平排成一行

给盒子同时设置

float: left;

或者

float: right;

注意：浮动的元素紧贴在一起，但是如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐

清除浮动：

• 为什么要清除浮动？

  • 父级盒子在很多情况下不方便给高度但是子盒子不给高度就不占有位置，最后父级盒子高度为0，子盒子有多少内容就显示多少内容，自动撑开父盒子最合理
  • 由于浮动元素不占用原文档的位置，所以会对后面的元素排版产生影响

• 怎么清除浮动？

  • 一般使用 after 伪元素清除浮动，具体做法为：在父元素上加

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

定位

• 将盒子定位到浏览器某一位置,通过 position 定位

1. 静态定位 static

默认值，表示就待在文档里

2. 相对定位 relative

相对定位没有脱离文档流，一般用于位移，主要给 absolute 元素做父级，配合z-index使用

3. 绝对定位 absolute

• 要配合relative一起使用，子级绝对定位，父级要相对定位，定位基准是父级元素中第一个(最近的)position不是static的元素
• 脱离原来的位置另起一层，比如对话框中的关闭按钮，也就是说绝对定位的盒子不占有位置

4. 固定定位 fixed

• 固定定位的定位基准是viewport(浏览器可视窗口，可能会出现bug)
• 不随滚动条移动，完全不占位置