进击的前端之CSS的浮动

浮动

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

特点：

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

如何清除浮动

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

标准流

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

排版规则：

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