初学者-CSS浮动思维导图

• 什么是浮动

  ---

  在css中，浮动是一种使元素脱离文档流的方法,会使元素根据float的值向左或向右移动,其周围的元素也会重新排列,直到它的外边缘碰到包含框或另一个浮动框的边框为止。
   

• 浮动定义和作用

  ---

  定义：元素脱离标准流，按照指定方向发生移动，遇到父级边界换行
  作用：解决水平布局的问题
   

• 浮动的语法规则

  ---

  选择器{     
        float:属性值
  }
  属性值：
      none:元素不浮动
      left:元素左浮动
      right:元素右浮动
   

• 特性

  ---

  1.行标签支持所有样式
  2.如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对齐排列
  3.元素脱离标准流
  4.浮动元素会具有行内块元素特性
   

• 清楚浮动

  ---

  为什么需要清除浮动？
  1.由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为 0 时，就会影响下面的标准流盒子。
  2.由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响。
  
  语法规则
  选择器{     
          clear:属性值
   }
  属性值：
     left:清除左侧浮动的影响
     right:清除右侧浮动的影响
     both:同事清除左右两侧浮动的影响
  
  解决父级边框塌陷问题
  方法一：在父标签结尾处，添加具有“clear:both”样式的空div标签
  方法二：父级div标签定义伪类“:after”和zoom属性
  方法三：父级div元素定义“overflow:hidden”样式。