浮动
1 浮动的来历
浮动设计的最初想法是为了实现文字环绕图片的效果。
后来浮动代替表格布局成为了主流的布局方式。
CSS的Float(浮动)，元素可以围绕其他元素向左或向右被推动
- 设置浮动，脱离普通文档流。
- 浮动的元素，如果不设置宽度，会尽可能的窄（被内容撑开）
- 浮动元素之后的元素将围绕它 浮动元素之前的元素将不会受到影响。
- float 设计的初始想法仅仅是为了做文字环绕图片。
2 页面流（文本流）
在 CSS 中，是存在流的概念的，正常情况下，页面总是由左至右，由上至下布局，我们把这种情况称作为正常页面流。
但是，在很多情况下，正常页面流有很多效果实现不了，所以需要一些手段来破坏流，而浮动（float）就是破坏流的一种手段。
设置浮动
.item {
float:left
}
.item {
float:right
}
/*float 属性的默认值是 none 表示没有浮动*/
- 在 CSS 中，我们通过 float 属性实现元素的浮动
- 浮动分为左浮动和右浮动，值分别是left和right
4 浮动之后的效果
- 浮动的元素可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
- 由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘：
当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失。
如果把所有三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。
如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”：
5 元素浮动之后的特点
不论是行内元素还是块级元素，设置浮动之后都会具有如下特点：
- 不再独占一行
- 可以设置宽高
- 完美支持 margin 和 padding
- 默认宽度会根据内容进行计算
- 构成了 BFC
5 清除浮动
5.1 浮动的元素对于其他元素的影响
浮动的元素会脱离文档流，按照指定的方向发生移动，遇到父级的边界或者是上一个浮动元素或者是上一个不浮动兄弟元素就停下来，所有，浮动元素前面的元素不会受到影响，后面的兄弟元素和父元素会受到影响。
- 后面的兄弟元素会当做浮动的元素不存在，可能会与浮动元素位置发生重合。
- 父元素： 浮动的元素脱离父级区域，无法撑开父元素的高度，造成父元素高度塌陷。进而会影响到父元素后面的兄弟元素，造成布局问题。
5.2 如何清除浮动的影响
1) 给浮动元素的父级设置高度 height（不推荐使用）
缺点：很多情况下元素的高度都是不确定的。
2) 以浮制浮，给浮动元素的父元素设置浮动，原理是开启BFC（不推荐使用）
缺点：只有在父级需要浮动的时候，可以这么清除，否则父级的浮动会继续影响其他元素。
3) 给父级设置
overflow：hidden；，原理也是开启BFC。优点：简单快捷，
缺点：元素超出的时候，会隐藏超出部分。
5) clear 浮动清除法：给浮动元素的下边添加一个块元素，书写样式
clear:both。缺点：增加额外的结构，不符合语义化标准
6) after 伪元素清浮动（推荐）
给浮动元素的父元素添加 after 伪类，给 after 伪类设置样式
clear:both。可以给所有浮动元素的父元素一个 clearfix 的类名，当一个元素需要清除浮动的时候，直接设置 clearfix 类名即可。
.clearfix:after{ content:""; /* 必须拥有content属性 内容为空*/ display: block; /* 必须块标签才能清浮动 */ clear: both; /* 清除浮动* / }
6 浮动实验
- 设置第一浮动的div
- 设置第2个浮动div
- 设置第3个浮动div
- 改变第三个浮动方向
- 改变第二个浮动方向
- 全部向左浮动,增加第一个的高度
- 使用clear属性清除浮动的影响
- 扩展盒子的高度 (元素高度和浮动的元素)
- 段落首字母浮动
- 图片浮动
- 简单浮动布局
7 浮动布局小案例
案例一：
案例二：
8 浮动相关CSS属性总结
- float 设置浮动 值: none(默认) /left /right
- clear 清除浮动。值: none(默认) /both /left /right