CSS 笔记（八）：布局 —— 浮动

CSS 笔记（八）：布局 —— 浮动

布局方式

布局方式是指浏览器如何对页面中的元素进行排版，具有标准流、浮动流和定位流的排版方式，浏览器默认的排版方式即为标准流（文档流/普通流）排版方式，分别为垂直排版（块级元素）和水平排版（行内元素/行内块级元素）

浮动流

浮动流是一种 “半脱离标准流” 的排版方式，仅有一种排版方式——水平排版，只能设置某个元素左对齐或者右对齐

属性

float

值

• left
• right

left 表示当前元素浮动后在父元素内部靠左，right 表示当前元素浮动后在父元素内部靠右

1. 浮动流中没有居中对齐，即没有 center，也不可以使用 margin: 0 auto;
2. 在浮动流中不区分块级元素/行内元素/行内块级元素，不论是哪一个类型，均可以水平排版
3. 在浮动流中无论是块级元素/行内元素/行内块级元素，均可以设置宽高

脱标

当一个元素浮动后，脱离了浏览器默认的标准流，此时，如果第一个元素浮动了，而第二个元素没有浮动，那么第一个元素会层叠第二个元素

排序规则

1. 相同方向上的浮动元素，先浮动的元素显示在前，后浮动的元素显示在后
2. 不同方向上的浮动元素，左浮动寻找左浮动，右浮动寻找右浮动
3. 浮动元素浮动之后的位置，由浮动元素浮动之前在标准流中的位置确定

浮动元素类似于浮动的气泡，在浮动流中占据一定的空间，向左浮动的元素靠左，向右浮动的元素靠右，浏览