在Web前端开发-CSS介绍干货01、Web前端开发-CSS介绍干货02、Web前端开发-CSS布局-框模型介绍干货中介绍了CSS选择器和字体族的重要基本概念、文字系列、背景系列样式和CSS布局中元素的盒模型，下面介绍浮动和定位在CSS布局中的另外两个重要应用。
根据元素浮动和定位的特点，CSS布局可以分为标准流、浮动流、定位流三种；
其中，标准流程采用块级元素占据单行，自上而下，行内元素一行显示，遇到障碍物自动换行，从左到右布局。
1. 浮动
（一）什么是浮动
元素脱离了原来的位置，不再占据空间，并且浮动在未浮动元素的顶部；
浮动元素具有内联块元素的特性，并实现边缘布局。 这里的边可以是父元素的边，也可以是同样浮动的兄弟元素的边。
(2)浮动解决的问题
将块级元素的默认垂直布局更改为水平布局。
内联块样式（:-block;）也可以改变块级元素的布局，但是不能灵活解决两个块级元素之间的间隙，也不能灵活解决块级元素的左对齐、右对齐等问题多个块级元素。 当然，如果想要随意放置块级元素，就需要使用定位。
(3) 浮动语法
选择器{float:none/left/right}对选择器选中的元素实现非浮动、左浮动、右浮动。
(4) 浮动的典型应用
通过非浮动块级元素+其中嵌套的浮动元素，可以实现页面的各种布局。
块级元素实现垂直布局，浮动元素实现水平布局。
(5)浮动引起的问题
浮动元素通常嵌套在非浮动元素内以协调使用； 所有浮动元素的高度和边距之和不能超过非浮动元素，否则会发生重叠。
那么当嵌套的浮动子元素数量不确定时，就无法确定父元素的高度。 为了解决这个问题，建议不设置父元素的高度，子元素的高度之和成为父元素的高度； 但是，浮动子元素具有离开原来位置、不占用空间的特性，因此父元素的高度只会为0，并且父元素之后的兄弟元素会与上一个父元素中的浮动元素重叠元素。 为了解决这个问题，建议清除浮动。
(6) 清除浮动
1）语法
选择器{清除：右/左/两者}； 清除选择器选中元素的右浮动、左浮动、左右浮动。
2）清除浮动模式
a) 附加标记方法
在与浮动元素同级添加一个空标签（块级），并设置为清除浮动样式。
.one {float:left}
.kongbq {clear:both}
b) 给父元素添加样式（常用）
语法：选择器 {:}
c) 给父元素添加after伪元素样式（常用）
样式如下：
.clearfixry:after {
content:"";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfixry {
*zoom:1;
}d) 在父元素上添加双伪元素（常用）
样式如下：
.clearfixry:before,.clearfixry:after {
content:"";
display:table;
}
.clearfixry:after {
clear:both;
}
.clearfixry {
*zoom:1;
}2、定位
（一）什么是定位
将html元素放置在任意指定位置，提高页面布局的灵活性。
（二）解决问题的定位
例如页面侧边的固定工具栏和轮播
(3)定位的实现方法
使用定位模式+边缘偏移，在样式中设置定位模式，然后设置元素盒模型的边缘偏移。
1) 边缘偏移
包括上、右、左四个子项。
2）定位方式分类
a) 静态定位()：元素没有偏移，这是元素本身默认的布局方式。
语法：选择器 {:;}
b) 相对定位()：设置相对于元素本身原始位置的偏移量。 （常用）
语法：选择器 {:;}
需要注意的是，设置了相对定位的元素实际上仍然占据位置
c) 绝对定位()：相对于该元素的具有定位的父（或更高级）元素进行定位。 （常用）
语法：选择器 {:;}
需要说明的是，（1）所设置的绝对定位元素的参考依据是具有定位模式的父级或更高级元素。
(2)设置了绝对定位的元素将具有浮动效果，即不再占据位置。
d) 固定定位（fixed）：相对于浏览器可视区域，固定在某个位置。 （常用）
语法：选择器 {:fixed;}
注（1）所设置的固定定位元素的引用是基于浏览器当前可见窗口的。
（2）固定定位的元素将会有浮动的效果，即不再占据一个位置。
e) 粘性定位()：被认为是相对定位和固定定位的混合体。 元素相对定位，直到它们穿过一定的偏移量，然后固定。
语法：选择器{:; 顶部：10px；}
需要注意的是（1）粘性定位必须设置侧向偏移（任意侧都可行），否则其作用与相对定位相同。
(2)设置粘性定位元素的引用是基于浏览器当前可见窗口的。
(3)设置的粘性定位元素实际上仍然占据位置
