12.1 介绍

  • 文档流:指的是元素排版布局过程中，元素会自动从左到右，从上往下的流式排版。最终窗体自上而下分成一行行，并在每行中从左至右的顺序排放元素
  • 每个非浮动块级元素都独占一行，浮动元素则按规定浮在行的一端。若当前行容不下则另起新行再浮动
  • 内联元素也不会独占一行;几乎所有元素(包括块级，内联和列表元素)均可生成子行，用于摆放子元素
  • 标准文档流等级:分为两个等级，块级元素和行内元素；
  • 脱离文档流：文档流内的正常元素识别不到这个元素(脱离文档的元素相当于平行漂浮在文档流之上)

正常的文档流:从左往右 从上往下
文档流可以分等级:行内元素和会计元素
行内元素 从左往右
块级元素 从上往下

12.2 面试题:行内元素和块级元素的特点，请列举出标签？

需求:需要块级元素(比如:div)在一行显示
脱离文档流:元素的正常排列方式被打破

脱离文档流的影响:

  1. float
  2. 定位

12.3 浮动参数的影响或负作用

  1. 设置背景颜色属性不起作用
  2. 给父元素设置边框border属性没有被撑开
  3. 给父元素设置内边距padding属性也没有被撑开

12.4 如何清浮动

  1. 给浮动元素的父元素手动添加一个固定的高度(不推荐)
  2. 给浮动元素的父元素设置overflow:hidden/auto
  3. 给浮动元素的父元素结束标签之前加一个具有元素特点的标签(我们一般用div)，给元素clear:both
  4. clearFix伪元素去清楚浮动 (这种方法是项目中最常用的方法)

利用伪元素:after清浮动的固定代码；只要清浮动我们在浮动元素的父元素上加一个.clearfix即可

12.5 让元素消失在我们的视野中

  1. 透明度opacity:0; [0~1]
  2. display:node 隐藏
  3. height:0和overflow:hidden
  4. line-height:0和overflow:hidden(没有设置高度的情况下)
  5. visbility:hidden;让所有可见性的元素隐藏
  6. margin/padding设置足够大 只要能让他消失
  7. 利用transform 属性 让transform坐标足够大