CSS position 知识

css positon 基本知识
position 指定一个元素在文档中的定位方式 top bottom right left 决定了最终位置 初始值为 static
position 取值 static | relative | absolute | sticky | fixed
相对定位元素：计算后位置属性为 relative 的元素
绝对定位元素：计算后位置属性为 absolute/fixed 的元素
粘性定位元素：sticky top bottom right left 确定元素位置

取值
static：元素在文档常规流中 top bottom right left z-index 属性无效
relative：会相对于其外围包含元素（一般为原来位置）来定位
absolute：从流中取出 为他指定一个绝对位置 相对于离他最近的父元素（非 static）指定的
fixed（固定定位）：元素相对于浏览器窗口定位 元素位置在屏幕滚动时不变
sticky：相对于该元素在流中 flow root 和最近的区块元素祖先定位 sticky 对 table 效果与 position ： relative 一样

粘性定位是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。
须指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同

dt {
/元素小于 2px 前为相对定位 ，之后为 为固定定位 元素固定在距离顶部 2px 位置/
position: sticky;
top: 2px;
}

相对定位元素，top 和 bottom 属性指定它相对于正常位置的垂直偏移，left 和 right属性指定水平偏移。
绝对定位元素，top、right、bottom 和 left 属性指定元素相对于其包含块的偏移，即此时位置为与包含块的相对位置。元素的边距（margin）定位在这些偏移之中
绝对定位 height 和 width 值为 auto 时，它们会自动计算以适合元素的内容 但是非替换（non-replaced）（如 span 元素本身是有实际内容的 浏览器会直接显示内容不需要判断属显示内容 img 为替换需要判断属性加载内容 src）绝对定位元素可以占据 top 和 bottom 的值（除 auto 外）所共同指定的可用空间，而不必设置 height（也就是设其为 auto）。left、right 与 width 也类似。

绝对定位元素的定位值发生冲突时的解决方法:
1. 如果同时指定 top 和 bottom（非 auto），优先采用 top。
2. 如果同时指定 left 和 right，若 direction 为 ltr（英语、汉语等），则优先采用 left；若 direction 为 rtl（阿拉伯语、希伯来语等），则优先采用 right。

relative + absolute 可以把元素移到 relative 容器的右上角 相对 relative 容器的绝对定位

float
float 取值 left | right | none | inline-start | inline-end
left 元素浮动在所在块容器左侧 right 素浮动在所在块容器右侧 none 不浮动
inline-start 元素浮动在所在块容器开始一侧 在ltr脚本中是左侧，在rtl脚本中是右侧。
inline-end 元素浮动在所在块容器结尾一侧 在ltr脚本中是右侧，在rtl脚本中是左侧。

float 当元素浮动后，会从正常流中删除，然后向左或右平移，直到碰到所处容器的边框或另一个浮动元素

清除浮动 clear: both; 浮动元素过大 超出容器 覆盖住其他元素 可在其他元素中清除浮动
在漂浮的元素之后，我们可以“清除”漂浮物来推下（往下推）其余的内容。
这个方法只是在同一块级格式化上下文（block formatting context）中没有其他元素的时候才是有效的
清除浮动只能清除同一块格式化上下文中在它前面的元素的浮动
clear 左右两边不允许有浮动内容

如果不能使用清除浮动，另一种做法是浮动容器的限制块级格式化上下文
容器中 overflow: hidden; height: auto;

清除浮动（clearfix hack）
清楚浮动黑科技：
1.overflow : auto 使用某些组合的 margin 和 padding 可能会出现恶心的滚动条可通过在将 margin 和 padding 放置在另一个包含父元素的元素上来解决
2.overflow ：hidden 会裁剪位于包含元素之外的任何内容

最新版本：
放弃对老 IE 支持，使用 display : block 允许在具有清楚的元素是兄弟元素时正确折叠页边距
.container::after { content: ""; display: block; clear: both; }

当针对现代浏览器时，我们现在可以删除zoom和::beforeproperty / values，并简单地使用：
.container::after { content: ""; display: table; clear: both;
}
不支持 IE6/7
Nicolas Gallagher的Micro Clearfix是最新的全球采用的clearfix解决方案。
已知支持：Firefox 3.5+，Safari 4+，Chrome，Opera 9+，IE 6+
.container::before, .container::after { content: ""; display: table; } .container::after { clear: both; }
.container {
zoom: 1; //控制元素放大比例
}

溢出属性：
置width: 100%容器
.container { overflow: hidden; display: inline-block; display: block;
}

display其他属性可以用于触发元素的“hasLayout”，而不是使用该属性为IE设置“hasLayout” 。

.container { overflow: hidden; zoom: 1; display: block; }

清除使用该overflow属性的浮动的另一种方法是使用下划线黑客。IE将应用以下划线为前缀的值，其他浏览器不会。该zoom属性触发hasLayout的在IE中：

.container { overflow: hidden; _overflow: visible; /* for IE */ _zoom: 1; /* for IE */ }

元素使用“清除”属性

快速和肮脏的解决方案...有许多缺点：

<br style="clear: both" /> <!-- So dirty! -->

缺点

• 它不响应，因此如果布局风格根据媒体查询而改变，则可能不会提供期望的效果。纯CSS的解决方案更为理想。
• 它不会为您的标记添加任何语义值。
• 它使你的代码看起来不专业。
• 在将来，当您需要使用另一个clearfix解决方案时，您不必回过头去除<br>标记周围的所有标签