浮动（float）
标准流：就是标签按照规定好默认方式排列
- 块级元素独占一行，从上向下顺序排列
- 行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行
- 一个标准的网页基本都包含这三种布局方式：标准流 浮动 定位
有很多的布局效果，标准流无法完成，比如把三个div放在一行，通过模式转化来做的话，他们之间会有空隙，而这个空隙有无法调整，所以需要利用浮动。因为浮动可以改变元素标签默认的排序方式。
网页布局第一准则：竖向排列用标准流，横向排列用浮动
float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘及包含块或另一浮动框的边缘
语法
选择器{float：属性值;}
属性值 | 描述 |
|---|---|
none | 元素不浮动（默认值） |
left | 元素向左浮动 |
right | 元素向右浮动 |
浮动特性
重要：
- 脱离标准普通流的控制（浮）移动到指定位置（动），俗称脱标
- 浮动的盒子不再保留原先的位置
- 如果多个盒子设置了浮动，浮动元素在一行内显示并且顶端对齐排列
- 如果装不下，则会在下一行显示
- 浮动元素具有行内块元素的特性
- 如果块级盒子没有设置宽度，默认宽度和父亲一样宽，但是添加浮动后，它的大小由内容来决定
浮动元素经常搭配标准流的父元素
作用：可以先确定父元素摆放的位置，再在父元素的盒子里放浮动元素，可以约束浮动元素在页面中显示的位置
**Question！**这里遇到了一些问题，当使用无序列表来做侧边栏的时候，把小圆点取消了，但是它还占着位置
**A！**发现了bug，原来是没有清除内外边距导致的
网页布局第二准则：先设置盒子的大小，之后设置盒子的位置
注意点：
- 浮动和标准流的父盒子搭配
- 一个元素浮动了，理论上其余的兄弟元素也要浮动
- 浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流
清除浮动
因为父盒子很多情况下不方便给高度，但是盒子浮动又不占有位置，最后父级盒子高度为0时，就会影响下面的标准流盒子
清除浮动后，父级盒子高度就能由子级盒子决定，父级有了高度就不会影响下面的标准流了
语法
选择器{clear：属性值;}
属性值 | 描述 |
|---|---|
left | 不允许左侧有浮动元素（清除左侧浮动的影响） |
right | 不允许右侧有浮动元素（清除右侧浮动的影响） |
both | 同时清除左右浮动的影响 |
额外标签法
在浮动元素末尾加上一个空标签（块级元素)，然后给这个标签清除浮动（关门）
父级添加 overflow
注意：是给父元素添加overflow:hidden;
属性值为：hidden、auto、scroll
:after 伪元素法
添加一串代码
代码语言：javascript复制.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
/* 用来兼容低版本浏览器 */
*zoom: 1;
}相当于额外标签法的升级版，这个是通过css在末尾生成了一个盒子，在末尾加墙
也可以通过选择器：before{}给盒子前面添加元素，在开头加墙
