进击的前端之CSS的浮动

47 阅读1分钟

浮动

float用于将元素移动到左边缘或右边缘,触及包含块或另外一个浮动元素的边缘。

特点:

  • 浮动元素会脱离标准流,在标准流中不占位置
  • 浮动元素比标准流级别高,可以覆盖标准流的元素
  • 下一个浮动元素会在上一个浮动元素后面左右浮动
  • 浮动元素不能通过text-align和margin来设置

如何清除浮动

  • 设置父元素高度
  • 在父元素内容的最后加一个块级元素,样式设为clear:both
  • 用为元素替代额外标签
  • 父元素设置overflow:hidden

标准流

标准流:又称 文档流,是浏览器在渲染显示网页内容时默认采用的一套排版规则,规定了应该以何种方式排列元素。

排版规则:

  • 块级元素:从上到下,垂直布局,独占一行
  • 行内元素或行内块元素:从左到右,水平布局,空间不够自动折行