CSS-文档流和 overflow 溢出

文档流

---

流动方向

1. inline 元素从左到右，到达最右边才会换行；
2. block 元素从上到下，每一个都另起一行；
3. inline-block 也是从左到右，

宽度

1. inline 宽度为内部 inline 元素的和，部能用 width 指定；
2. block 默认自动计算宽度，可用 windth 指定；
3. inline-block 结合前两者特点，可用 width。

高度

1. inline 高度由 line-height 间接确定，跟 height 无关；
2. block 高度由内部文档流元素决定，可以设 height；
3. inline-bllock 跟 block 类似，可以设置 height。

脱离文档流的元素

float
position:absolute / fixed

脱离了文档流就没办法回来了！！！

overflow 溢出

当内容大于容器

---

1. 等内容的宽度或者高度大于容器的会溢出；
2. 可用 overflow 来设置是否显示滚动条；
3. auto 是灵活设置
4. scroll 是永远显示（基本不用，十分丑！！）
5. hidden 是直接隐藏溢出部分
6. visible 是直接显示溢出部分
7. overflow 可以分为 overflow-x 和 overflow-y

注意

---

1. 永远不要把宽度设置为 100%；