一、CSS布局种类
网页布局的核心——就是用 CSS 来摆放盒子位置。CSS布局有三种机制,分别为普通流、浮动、定位。
1)普通流
一个网页内的标签元素按照从上到下，从左到右的顺序排列。块级元素会独占一行，从上向下顺序排列。行内元素会按照顺序，从左到右顺序排列。
2)浮动
让盒子从普通流中浮起来——浮动最早是用来做文字环绕效果。
3)定位
将盒子定在浏览器的某一个位置——CSS 离不开定位，特别是后面的 js 特效。
二、浮动布局
2.1 浮动布局原理
元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制，移动到其父元素中指定位置的过程。
2.2 浮动布局作用
- 浮动最早是用来控制图片，实现文字环绕图片的效果。
- 让多个盒子(div)水平排列成一行，使得浮动成为布局的重要手段。
2.3 浮动布局语法
在 CSS 中，通过 float 属性定义浮动，语法如下：
选择器 { float: 属性值; }
| 属性值 | 描述 |
|---|---|
| none | 元素不浮动（默认值） |
| left | 元素向左浮动 |
| right | 元素向右浮动 |
注意：
- 浮动只有左右，没有居中！
- 我们浮动的元素 只能一行显示（除非装不开盒子，才会下来）
- 浮动的元素 不占位置
- 浮动的元素是脱标 脱离标准流 不是标准流
2.4浮动布局的应用
- 用普通流的大盒子（父级）定义上下顺序——占住位置；
- 使用浮动在大盒子内部设置小盒子的位置——水平排列。
三、浮动布局的特性
3.1 与父盒子的关系
- 子盒子的浮动参照父盒子对齐
- 不会与父盒子的边框重叠，也不会超过父盒子的内边距
3.2 与兄弟盒子的关系
在一个父级盒子中，如果前一个兄弟盒子是：
- 浮动的，那么当前盒子会与前一个盒子的顶部对齐；
- 普通流的，那么当前盒子会显示在前一个兄弟盒子的下方。
- 浮动只会影响当前的或者是后面的盒子，不会影响前面的标准流。
3.3 具有行内块元素特性
元素添加浮动后，会具有行内块元素的特性——元素的大小取决于：
- 定义的大小（优先级高）
- 元素内部的内容
四、浮动总结
浮动的目的——让多个盒子在同一行显示。
float —— 浮漏特
| 特点 | 说明 |
|---|---|
| 浮 | 加了浮动的盒子是浮起来的，漂浮在其他标准流盒子的上面。 |
| 漏 | 加了浮动的盒子是不占位置的，它原来的位置漏给了标准流的盒子。 |
| 特 | 特别注意：1. 浮动的盒子需要和标准流的父级搭配使用；2. 浮动可以使元素具有行内块特性。 |
五、清除浮动影响
1)为什么清除？
清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。
2)什么时候清除浮动？
当影响了我们布局的时候，就清除浮动。
5.1 方法一：额外标签法
在CSS中，clear属性用于清除浮动，其基本语法格式如下：
选择器{clear:属性值;} clear 清除
| 属性值 | 描述 |
|---|---|
| left | 不允许左侧有浮动元素（清除左侧浮动的影响） |
| right | 不允许右侧有浮动元素（清除右侧浮动的影响） |
| both | 同时清除左右两侧浮动的影响 |
5.2 方法二：overflow方法
可以通过触发BFC的方式，可以实现清除浮动效果。（BFC后面讲解）
可以给父级添加： overflow为 hidden| auto| scroll 都可以实现。
5.3 方法三：after伪元素
:after 方式为空元素额外标签法的升级版，好处是不用单独加标签了
使用方法：
.clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix {*zoom: 1;} /* IE6、7 专有 */
5.4 方法四：before/after双伪元素
使用方法：
.clearfix:before,.clearfix:after {
content:"";
display:table; /* 这句话可以出发BFC BFC可以清除浮动,BFC我们后面讲 */
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}
