一、浮动

1、页面布局的方式

页面布局的方式，主要包括：文档流（常规流）、浮动流（脱离文档流）

（1）文档流

• 文档流中元素框的位置有元素在HTML中的位置所决定的。块级元素从上到下依次排列，框之间的垂直距离由框的垂直margin计算得到，行内元素在一行中水平布置。
• 文档流就是html文档中的元素，如块级标签，行内标签依据他们显示属性按照文档中的先后次序依次显示，块级元素就占一行或者多行，行内元素就其他元素共处一行，一个萝卜一个坑

（2）浮动流：元素从正常顺序被抽离

• 浮动可以使元素向左或者向右移动，直到她的外边缘碰到包含框或者另一个浮动框的边框为止。
• 由于浮动框不在正常文档流中，所以标准文档流中块框表现的就像浮动框不存在一样。

2、浮动

浮动属性：float:left (向左浮动)/float:right (向右浮动)/none (默认值)
float 属性定义元素在那个方向移动，遇到floa属性实现元素浮动，以往这个属性应用于图像，使文本环绕在图像周围，不过在CSS中，任何元素都可以浮动，浮动元素会生成一个块级框，而不论她本身是何种元素。
如果浮动非替换元素，则要指定一个明确的宽度；否则，尽可能使他们变窄。

（1）左浮动

box3没有左浮动前.png

box3左浮动后.png

(2) 右浮动

类似于左浮动
总结一下：浮动不会像文档流一样（行内标签），贴增在侧边，它首先会判断上一个标签有没有浮动属性，没有浮动属性，是标准的文档流，就会在本行内（贴着上一个标签的底端线）进行左右浮动，如果上一个标签具有浮动属性，就会跟在后面浮动，具体的页面布局还得具体分析。

3、总结

1. 浮动元素不在标准文档流中，所以浮动后面紧跟着元素占据了浮动元素原先的位置（文档流往上顶）
2. 浮动是个比较特殊的个体，它虽然不在标准文档流中，但是仍然跟标准文档流相互影响。（行内元素）
3. 如果浮动前面的元素没有浮动属性，则浮动会另起一行在元素的下面浮动。（本行顶上面元素下边浮动）
4. 当一个元素浮动之后，其下方装在文字的容器虽然会占据浮动元素原来的位置，但是其中的文字会一直围绕在浮动元素周围，而不会被浮动元素覆盖。（按理说会把下面的标准流盖住，但是没有文字部分围绕在周围）

4、浮动产生的副作用

1. 背景不能显示：如果对父级设置了CSS背景或者背景图片，而父级不会被撑开，导致背景不能显示。（父级元素没有设置width和height的值，父级标签设置了CSS背景或者标签，子标签有内容就可以撑起来，但是子标签有内容属性设置为浮动了，飘起来了，父标签当然没内容可以撑起来了，不显示了。清楚浮动就会显示出来，设置宽高即可）
2. 边框不能被撑开
3. margin padding不能正确显示，特别是上下边的margin跟padding不能正确显示。（由于浮动，浮动元素超过了父标签区域，挤到下一行，本应该margin是页面展示上下标签的最大值，但是显示了页面展示上下标签margin之和）

5、清楚浮动

浮动 清除： clear:left/right/both/none;
clear属性规定元素的哪一侧不允许其他浮动。

1. left：在左侧不允许浮动
2. right： 在右侧不允许浮动
3. both：在两侧均不允许浮动
4. none：默认值，允许浮动出现在两侧

6、 其他清除浮动

1. 在父级标签添加最后一个子元素，子元素设置样式clear：both
2. 给父级元素设置高度
3. 设置after伪标签
   div:after(display:block;clear:both;content:"";)
4. 父级div定义overflow：hidder和zoom:1
   (zoom 权重)