前端学习笔记——浮动规则

定位方案

• 在CSS中，有3种常用的方法对元素进行定位、布局
  • normal flow：标准流、常规流、文档流
  • absolute positioning：绝对定位
  • float：浮动
• 绝对定位、浮动都会让元素脱离标准流，以达到灵活布局的效果

float 属性

可以通过float属性让元素产生浮动效果，float的常用取值

• none：不浮动，默认值
• left：向左浮动
• right：向右浮动

浮动的规则

规则一

元素一旦浮动后，会脱离标准流，朝着向左或向右方向移动，直到自己的边界紧贴着包含块（一般是父元素）或者其他浮动元素的边界为止
定位元素会层叠在浮动元素上面

规则二

• 浮动元素不能与行内级内容层叠，行内级内容将会被浮动元素推出
• 比如行内级元素、inline-block元素、块级元素的文字内容
  
  利用此特性，可以轻松实现文字环绕功能
  

规则三

行内级元素、inline-block元素浮动后，其顶部将与所在行的顶部对齐

规则四

如果元素是向左（右）浮动，浮动元素的左（右）边界不能超出包含块的左（右）边界

带圆圈的数字，标记着浮动元素浮动之前的位置，下面同理

规则五

• 浮动元素之间不能层叠
• 如果一个元素浮动，另一个浮动元素已经在那个位置了，后浮动的元素将紧贴着前一个浮动元素（左浮找左浮，右浮找右浮）
• 如果水平方向剩余的空间不够显示浮动元素，浮动元素将向下移动，直到有充足的空间为止
• 

规则六

浮动元素的顶端不能超过包含块的顶端，也不能超过之前所有浮动元素的顶端

本文整理自coderwhy老师的课程最新最全HTML5-CSS3教程 ，公众号同名【coderwhy】，老师的课程特别清晰，强推。