CSS 提供了3种机制来设置盒子的摆放位置，分别是普通流（标准流）、浮动和定位，其中：

A. 普通流（标准流）

  • 块级元素会独占一行，从上向下顺序排列；

    • 常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table

  • 行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行；

    • 常用元素：span、a、i、em等

B. 浮动

  • 让盒子从普通流中浮起来,主要作用让多个块级盒子一行显示，而且不会有空白缝隙，分别靠左靠右对齐。
  • 可以改变标签的默认排列方式
  • 最初是为了使文字环绕图片的效果，所以和浮动图片和文字在一起时，不会压住文字内容，而会使文字环绕图片。

C. 定位

  • 将盒子定在浏览器的某一个位置——CSS 离不开定位，特别是后面的 js 特效。

浮动

1
选择器 { float: 属性值; }
属性值 描述
none 元素不浮动（默认值）
left 元素向左浮动
right 元素向右浮动

浮动只会影响当前的或者是后面的标准流盒子，不会影响前面的标准流，因为前面的标准流自己占一个位置。
**建议:**如果一个盒子里面有多个子盒子，如果其中一个盒子浮动了，其他兄弟也应该浮动。防止引起问题

特性：元素的浮动是指设置了浮动属性的元素会

  • 脱离标准普通流的控制,不占位置，脱标
  • 移动到指定位置。

浮动(float)小结

特点 说明
浮 加了浮动的盒子「是浮起来」的，漂浮在其他标准流盒子的上面。
漏 加了浮动的盒子「是不占位置的」，它原来的位置「漏给了标准流的盒子」。
特 「特别注意」：浮动元素会改变display属性， 类似转换为了行内块，但是元素之间没有空白缝隙

约束浮动元素位置，通常采用的策略：

先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置，使浮动控制在标准流中

清除浮动

不是所有父盒子都有高度，因为每个内容长度数量都不一样，应当让子浮动盒子自动撑开父盒子

总结：

  • 由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响
  • 准确地说，并不是清除浮动，而是清除浮动后造成的影响

清除浮动本质清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。清除浮动之后， 父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了

清除浮动的方法

1
选择器 { clear: 属性值; }   clear 清除
属性值 描述
left 不允许左侧有浮动元素（清除左侧浮动的影响）
right 不允许右侧有浮动元素（清除右侧浮动的影响）
both 同时清除左右两侧浮动的影响

实际工作中,几乎只用clear: both