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

定位方案

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

float 属性

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

  • none:不浮动,默认值
  • left:向左浮动
  • right:向右浮动

浮动的规则

规则一

元素一旦浮动后,会脱离标准流,朝着向左或向右方向移动,直到自己的边界紧贴着包含块(一般是父元素)或者其他浮动元素的边界为止
定位元素会层叠在浮动元素上面
前端学习笔记——浮动规则

规则二

  • 浮动元素不能与行内级内容层叠,行内级内容将会被浮动元素推出
  • 比如行内级元素、inline-block元素、块级元素的文字内容
    前端学习笔记——浮动规则
    利用此特性,可以轻松实现文字环绕功能
    前端学习笔记——浮动规则

规则三

行内级元素、inline-block元素浮动后,其顶部将与所在行的顶部对齐
前端学习笔记——浮动规则

规则四

如果元素是向左(右)浮动,浮动元素的左(右)边界不能超出包含块的左(右)边界
前端学习笔记——浮动规则
带圆圈的数字,标记着浮动元素浮动之前的位置,下面同理

规则五

  • 浮动元素之间不能层叠
  • 如果一个元素浮动,另一个浮动元素已经在那个位置了,后浮动的元素将紧贴着前一个浮动元素(左浮找左浮,右浮找右浮)
  • 如果水平方向剩余的空间不够显示浮动元素,浮动元素将向下移动,直到有充足的空间为止
  • 前端学习笔记——浮动规则

规则六

浮动元素的顶端不能超过包含块的顶端,也不能超过之前所有浮动元素的顶端
前端学习笔记——浮动规则

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