【CSS之浮动和定位】

前言

传统网络布局的三种方式：标准流、浮动和定位三种

一、CSS浮动是什么？

float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。
语法：

选择器 {
float: 属性值;
}

属性值
none：元素不浮动
left：元素向左浮动
right ：元素向右浮动

1、浮动的特性

1.浮动元素会脱离标准流（脱标）
2.浮动的盒子不再保留原先的位置
3.浮动元素会具有行内块元素特性
3.多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对齐排列

2、浮动的应用

让某一个元素浮动到想要的位置

3、清除浮动

语法:
选择器{
clear：属性值
}
属性值
left ：消除左浮动
right：消除右浮动
both：左右一起消除

4、清除浮动

二、CSS定位是什么？

在CSS中关于定位的内容是：position:relative | absolute | static | fixed。static 没有特别的设定，遵循基本的定位规定，不能通过z-index进行层次分级。在文本流中，任何一个元素都被文本流所限制了自身的位置，但是通过CSS我们依然使得这些元素可以改变自己的位置，我们可以通过float来让元素浮动，我们也可以通过margin来让元素产生位置移动。
语法：

选择器 {
position: 属性值;
}

属性值
top
bottom
left
right

1、定位的组成

定位=定位模型+偏移量

2、定位模型

1.静态定位模型
position:static;默认是static

2.绝对定位模型
position:absolute;1.脱离文档，不占据原来的位置；2.会提升元素的层级；3.参照开启了定位的祖先元素，如果祖先元素没有开启定位，则参照整个网页

3.固定定位模型
position:fixed;1.元素会脱离文档流；2.参照浏览器的视口进行定位

4.相对定位模型
position: relative;1.元素不会脱离文档；2.提升元素的层级；3.不会改变元素的性质；4.参照自身的位置；5.子绝父相

5.粘性定位模型
position：sticky；1.参照位置是浏览器的视口；2.不脱离文档流