文章目录
overflow
overflow 属性用于控制内容溢出元素框时显示的方式
| 属性值 | 描述 |
|---|---|
| visible | 默认值。内容不会被修剪，会呈现在元素框之外 |
| hidden | 内容会被修剪，并且其余内容是不可见的 |
| scroll | 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容 |
| auto | 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容 |
# 内容会被修剪，浏览器会显示滚动条以便查看其余内容
overflow: scroll;
# 设置 水平 垂直 滚动条状态
overflow: scroll hidden;
# 设置 水平滚动条
overflow-x: scroll;
# 设置 垂直滚动条
overflow-y: hidden;
float
文档流
指得是盒子按照 HTML 标签编写顺序依次从上到下的顺序，块元素独占一行，行内元素在同一行从左到右依次排列，先写的先排，后写的后排，每个盒子有自己的位置
浮动特性
浮动: 指的是标签浮动到指定的位置上，浮动之后不会和之前的元素保持同一层
- 浮动会脱离文档流，不再占用位置，会覆盖后面的没有浮动的元素
- 浮动只有两个方向，即 左浮动(left) 和 右浮动(right)
- 浮动会造成文字环绕效果
- 停止浮动
- 当浮动遇到父元素的边界停止浮动
- 如果前面有浮动的元素，碰到前面的浮动元素并列一排显示
- 如果前面有未浮动的元素，换行浮动
- 当浮动的元素的宽度，超过父类元素的边界时，自动换行
阻止浮动
要想阻止浮动框，需要对该框使用 clear 属性
clear 属性的值可以是 left，right，both 或 none，它表示框的哪些边不应该挨着浮动框！
父元素占据空间
因为浮动元素脱离了文档流，所以包围的图片和文本的 div 不占据空间
此时，当元素浮动起来后，无法撑开父元素的高度，就会出现如下场景：
此时，为父元素设置如下属性即可：
父元素:after{
content: "";
display: table;
clear: both;
}
Position
position 属性用来指定一个元素在网页上的位置，一共有 5 种定位方式，即 position 属性主要有 5 个值
- static
- relative
- fixed
- absolute
- sticky
static
static 是 position 属性的默认值，表示没有定位，或者说不算具有定位属性。如果省略 position 属性，浏览器就认为该元素是 static 定位
这时，浏览器会按照源码的顺序，决定每个元素的位置。每个块级元素占据自己的区块，元素与元素之间不产生重叠，这个位置就是元素的默认位置
static 定位所导致的元素位置，是浏览器自主决定的，所以这时 top ， bottom ， left ， right 这四个属性无效
relative , absolute , fixed
relative , absolute , fixed 这三个属性值有一个共同点，都是相对于某个基点的的定位，不同之处仅仅在于基点不同。
这三种定位都不会对其它元素的位置产生影响，因此元素之间可能产生重叠
relative
相对定位，相对于元素的默认位置进行偏移，定位基点是元素的默认位置
首先按默认方式 (static) 生成一个元素，
然后相对于默认的位置进行偏移，移动的方向和幅度由 top ， bottom ， left ， right 属性确定，偏移之后原来位置还在占用，新的位置不占用空间
div{
position: relative;
left: 50px;
top: 50px;
}
absolute
绝对定位，相对于最接近的一个具有定位属性的父元素进行定位
如果父类元素有定位属性，那么则以父类元素为参照物进行定位
如果父类元素没有定位属性，那么依次向上找，直到 body元素，即相对于浏览器窗口进行定位
<div id="outter">
<div id="inner">
</div>
</div>
#inner{
position: absolute;
top: 50px;
}
上面的代码中，父元素是 relative 定位，子元素是 absolute 定位，所以子元素的定位基点是父元素，相对于父元素的顶部向下偏移 50px，如果父元素是 static 定位，上面的例子就是相对于网页的顶部向下偏移 20 px
注意，absolute 定位的元素是不占空间的，会脱离文档流
fixed
固定定位，相对于浏览器窗口进行偏移，即定位基点是浏览器窗口。这会导致元素的位置不随页面的滚动而变化，好像固定在网页上一样
例如： 网页 回到顶部 按钮
div{
position:fixed;
bottom: 50px;
right: 30px;
}
sticky
粘性定位，跟前面的四个属性值都不一样，它会产生动态效果，很像 relative 和 fixed 的结合：一些时候是 relative定位（定位基点是自身默认位置），另一些时候自动变成 fixed 定位（定位基点是浏览器窗口）
因此，它能够形成 “动态固定” 的效果。比如，网页的搜索工具栏，初始加载时在自己的默认位置 (relative定位)
页面向下滚动时，搜索栏变成固定位置，始终停留在页面头部（fixed定位）
等到页面重新向上滚动回到原位，工具栏也会回到默认位置
必须指定 top ， bottom ， left ， right 其中之一，浏览器把它当作 sticky 的生效门槛，否则就等同于 relative 定位，不产生 动态固定 的效果。
#item {
position: sticky; top: 50px;
}
在浏览器顶部与 元素 item 的距离大于 50 px 时，元素为相对定位。之后，元素将固定在与顶部距离 50 px 的位置，直到浏览器窗口回滚到超过阈值