CSS基础——常规流，浮动，定位

在CSS中，大体上将页面中盒子的排列分为三种方式：

1. 常规流
2. 浮动
3. 定位

一. 常规流

所有元素，默认情况下，都属于常规流布局。
总体规则：块盒独占一行，行盒水平依次排列
包含块（containing block）：每个盒子都有它的包含块，包含块决定了盒子的排列区域。
绝大部分情况下：盒子的包含块，为其父元素的内容盒。

1. 每个块盒的总宽度，必须刚好等于包含块的宽度。
   宽度的默认值是auto。
   margin的取值也可以是auto，默认值0。
   若宽度、边框、内边距、外边距计算后，仍然有剩余空间，该剩余空间被margin-right全部吸收
   在常规流中，块盒在其包含块中居中，可以定宽、然后左右margin设置为auto。

2. 每个块盒垂直方向上的auto值
   height : auto，适应内容的高度
   margin : auto，表示0

3. 百分比取值
   padding、width、margin可以取值为百分比。
   以上的所有百分比相对于包含块的宽度。
   高度的百分比：
   1）. 包含块的高度取决于子元素的高度，设置百分比无效
   2）. 包含块的高度不取决于子元素的高度，百分比相对于父元素高度

4. 上下外边距的合并
   两个常规流块盒，上下外边距相邻，会进行合并。
   两个外边距取最大值。

二. 浮动

应用场景：

1.文字环绕
2.横向排列

浮动的基本特点：

1.修改float属性值为：

• left : 左浮动，元素靠上靠左
• right: 右浮动，元素靠上靠右

2.默认值为none
3.当一个元素浮动后，元素必定为块盒（更改display属性为block）
4.浮动元素的包含块，和常规流一样，为父元素的内容盒

盒子排列:

1. 左浮动的盒子靠上靠左排列
2. 右浮动的盒子考上靠右排列
3. 浮动盒子在包含块中排列时，会避开常规流块盒
4. 常规流块盒在排列时，无视浮动盒子
5. 行盒在排列时，会避开浮动盒子
6. 外边距合并不会发生

高度坍塌:

原因：常规留盒子的自动高度在计算时，不会考虑浮动盒子。
清除浮动，涉及属性clear

• 默认值：none
• left：清除左浮动，该元素必须出现在前面所有左浮动盒子的下方
• right：清除右浮动，该元素必须出现在前面所有右浮动盒子的下方
• both：清除左右浮动，该元素必须出现在前面所有浮动盒子的下方

三. 定位

手动控制元素在包含块中的精准位置，涉及的CSS属性：position

position属性：

• 默认值：static，静态定位（不定位）
• relative：相对定位
• absolute：绝对定位
• fixed：固定定位

一个元素，只要position的取值不是static，认为该元素是一个定位元素。
定位元素会脱离文档流（相对定位除外）

相对定位

不会导致元素脱离文档流，只是让元素在原来位置上进行偏移。可以通过四个CSS属性对设置其位置：

• left
• right
• top
• bottom

盒子的偏移不会对其他盒子造成任何影响。

绝对定位：

1. 宽高为auto，适应内容
2. 包含块变化：找祖先中第一个定位元素，该元素的填充盒为其包含块。若找不到，则它的包含块为整个网页（初始化包含块）

固定定位：

其他情况和绝对定位完全一样。
包含块不同：固定为视口（浏览器的可视窗口）

多个定位元素重叠时：

设置z-index，通常情况下，该值越大，越靠近用户
只有定位元素设置z-index有效。
z-index可以是负数，如果是负数，则遇到常规流、浮动元素，则会被其覆盖。

补充：

• 绝对定位、固定定位元素一定是块盒
• 绝对定位、固定定位元素一定不是浮动
• 没有外边距合并