2020-09-06-float-position

168 阅读1分钟

布局方式

  • 1.静态块级
  • 2.弹性布局(flex)
  • 3.网络布局(grid)
  • 4.自适应布局(根据当前访问设备进行多套样式来适配)
  • 5.响应式布局(通过媒体查询进行适配,rem/em)
  • 6.浮动布局(float)
  • 7.定位布局(position)

float和position有什么区别?

float:none left right inherit

特性:

  • 浮动会脱离文档流,并且会随着分辨率和窗口尺寸的变化而变化
  • 浮动后面的元素如果是块级元素,会占据块级元素的文本位置,但会与块级元素背景和边框重叠
  • 多个浮动不会产生重叠现象
  • 会将块级元素和行内元素变为行内块元素
  • position:relative absolute fixed static 特性
  • relative和static不会脱离文档流
  • absolute和fixed会脱离文档流
  • absolute根据relative定位。fixed根据body定位
  • absolute和fixed会触发BFC
  • 定位的优先级高于浮动