CSS4

css布局的三种机制：普通流（标准流）、浮动和定位
普通流：块级（自上而下）、行内（一行，碰到父元素边缘会自动掉下来换行，像水一样流动）。
浮动：让盒子从普通流中浮动起来，主要作用让多个块级盒子一行显示。
定位：将盒子定在浏览器的某一个位置，css离不开定位。

display:inline-block 盒子之间会有缝隙，而且缝隙比较难去掉。

使用浮动的原因：
1.让多个盒子（div）水平排列成一行
2.让盒子实现左右对齐

浮动：1.脱离普通流的限制 2.移动到指定位置
浮：脱标
漏：浮动的盒子把自己的位置漏给下面的盒子，不占有原来的位置
特：float属性会改变元素的display属性。浮动元素会生成一个块级框，无论本身是什么元素，生成的块级框和行内块元素模式相似，但是之间没有空隙。如果浮动元素盒子的宽度大于父亲的宽度，盒子会另起一行。

浮动细节：第一行两个盒子 第二行一个盒子。因为浮动流脱标，要减少对其他标准流的影响。先给第一行父亲来个标准流，再给两个盒子设置浮动。

浮动元素与父盒子关系：子盒子的浮动不会与父盒子的边框重叠，也不会超过父盒子的内边距。
浮动元素与兄弟盒子关系：浮动只会影响当前的或者后面标准流盒子，不会影响前面标准流的盒子
1.如果两个兄弟盒子都浮动，则顶部对齐 2.如果前一个不浮动，后一个兄弟盒子浮动，则还是上下排列。

标签：浮动,块级,盒子,CSS4,元素,一行,标准
来源： https://www.cnblogs.com/qiaomulala/p/14210513.html