一、常规流
又叫普通流、文档流、普通文档流
脱离文档流就是不占元素位置
盒模型中的auto值
-
水平方向
常规流盒子水平方向上的尺寸，必须等于包含块的宽度
如果不行，则强行将margin-right设置为auto
-
垂直方向
margin为auto：0px
height为auto：适应内容的高度
盒子位置
-
盒子在包含块的垂直方向上依次摆放
依次摆放：按照HTML元素的书写顺序从上到下摆放
-
垂直方向上，若两个外边距相邻，则进行合并（折叠）
垂直方向：水平方向上的外边距不会合并
外边距相邻：两个外边距之间没有border、padding和content
外边距合并（规则）：
1.相同值，取一个
2.都是正值取最大
3.都是负值取最小
4.一正一负则相加
禁止外边距合并可以加overflow：hidden；
二、浮动
浮动盒子位置
浮动的初衷是为了实现文字环绕
- 左浮动的盒子向上向左排列
- 右浮动的盒子向上向右排列
- 浮动盒子的顶边不得高于上一个盒子的顶边
- 若剩余空间无法放下浮动的盒子，则该盒子向下移动，直到具备足够的空间能容纳盒子，然后再向左或向右移动
子级浮动，父级元素高度塌陷
缺点：需要在HTML写一个空标签
解决方式，给父元素添加伪元素
清除浮动
1.clear属性名 left、right、both（全部）（对最后一个子元素使用可防止父元素塌陷）
2.overflow：hidden；（功能可清除浮动 实际是溢出内容隐藏 也可使外边距合并）
常规流盒子和浮动盒子混合摆放
为什么高度塌陷 脱离文档（页面）流了谁浮动谁脱离
-
浮动盒子在摆放时，要避开常规流盒子
-
常规流盒子在摆放时会无视浮动盒子
-
常规流盒子的自动高度计算时，无视浮动盒子—（高度塌陷）
绝对定位
当浮动元素被设置为绝对定位
属于绝对定位，float属性被强制设置为none
影响
绝对定位元素不会对其他任何元素造成任何影响
位置
可以通过top、bottom、right、left进行移动
绝对定位元素的包含块
固定位置使用场景
position-fixed
-
pc端：页面头部区域
-
移动端：footer底部
- ad（广告）
- 侧边栏
- 目录
- 回到顶部
- 即时通讯
包含块为视口 偏移量的设置（移动）
起始位置是视口的左上角
①参照物是屏幕可视区
②元素变成块元素
③完全脱离文档流，不占位置
绝对位置
绝对位置包含块 ：包含我，离我最近的元素的position
的属性值不是默认值（static）若都是默认值则以视口为包含块
适用场景 两个及以上的标签重叠在一起的时候