css定位

CSS position属性

序号	属性值	描述
1	static	static是position的默认值，指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。。
2	relative	元素先放置在未添加定位时的位置，再在不改变页面布局的前提下调整元素位置（）,,通过top、right、bottom、left 属性来相对于其原来的位置进行移动,可以设置外边距（margin），且不会与其他边距合并。
3	absolute	不为元素预留空间，通过指定元素，来确定元素位置，。绝对定位的元素可以设置外边距（margin），且不会与其他边距合并。
4	fixed	，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置,fixed相对于window固定，滚动浏览器窗口并不会使其移动，。。打印时，元素会出现在的每页的固定位置。fixed属性会创建新的层叠上下文。当元素祖先的 transform 属性非 none 时，容器由视口改为该祖先,可以使用 top、right、bottom、left 属性是元素偏移位置
5	sticky	盒位置根据正常流计算(这称为正常流动中的位置)，然后相对于该元素在流中的 flow root（BFC）和 containing block（最近的块级祖先元素）定位。在所有情况下（即便被定位元素为 table时），该元素定位均不对后续元素造成影响。当元素 B 被粘性定位时，后续元素的位置仍按照 B 未定位时的位置来确定。position: sticky对 table元素的效果与 position: relative 相同。
6	inherit	从父元素继承 position 属性的值。

CSS display属性

序号	属性值	描述
1	inline	默认值，将设置该元素的标签像普通文本一样插入文档流，不会自动换行或者设置宽度和高度。
2	block	将绑定该属性的标签以块的形式插入到文档流中，即会自动设置宽跟高并且会换行，可以设定margin 跟padding。
3	inline-block	将绑定该元素的标签以inline内联样式插入到文档流中,然后它本身拥有block块的属性，可以设置宽度跟高度。
4	none	将该元素隐藏，不会再文档流中出现。

CSS float属性 （引用：https://www.cnblogs.com/lrzw32/p/4948514.html）

float需要遵守的一些规则

1. 浮动元素会从普通文档流中脱离，但浮动元素影响的不仅是自己，它会影响周围的元素对齐进行环绕。设置了float属性元素变成了一个块级元素的感觉，可以设置width和height属性。
2. 包含块：浮动元素的包含块就是离浮动元素最近的块级祖先元素,浮动元素的浮动位置不能超过包含块的内边界.
3. 如果有多个浮动元素，浮动元素会按顺序排下来而不会发生重叠的现象。
4. 如果两个元素一个向左浮动，一个向右浮动，左浮动元素的marginRight不会和右浮动元素的marginLeft相邻,如果包含块的宽度不够大，则后面浮动的元素会向下浮动。
   5.如果有非浮动元素和浮动元素同时存在，并且非浮动元素在前，则浮动元素不会不会高于非浮动元素。
5. 浮动元素会尽可能地向顶端对齐、向左或向右对齐。

float的特殊情况

1. 浮动元素的延伸性：浮动元素高度大于父级元素，如果父级元素没有设置浮动，会出现浮动元素超出了父元素的底端的情况，只要将父元素也设置为浮动的就可以这就这个问题。可以理解为元素被设置成浮动后，该元素会进行延伸进而包含其所有浮动的子元素。
2. 浮动元素超出父级元素的padding

clear属性

1. 确保当前元素的左右两侧不会有浮动元素。
2. 。

清除浮动

清除浮动的目的是解决高度塌陷的问题。