你真的了解吗? CSS 溢出 & 浮动 & 定位

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 的位置，直到浏览器窗口回滚到超过阈值