浮动、清除浮动、BFC
一. 浮动css
1. 浮动的定义浏览器
使元素脱离文档流，按照向左或向右的方向移动，直到它的外边缘碰到包含它的框或另外一个浮动框为止。布局
脱离文档流就是在页面中不占位置了。flex
左浮动右浮动此处就再也不赘述了。网站
2. 看一下浮动的一些状况spa
(1). 只给第二个p浮动时，3不见了，他其实在2的下面，我给3一个宽一点的宽度。会发现3在2的下面。.net
(2). 给3一个浮动设计
他会没有什么变化，由于浮动只会影响他后面的元素，若是上面的元素不浮动，他也不会上去的3d
(3). 把外边框的div宽度变小，会致使没法容纳全部的浮动元素，代码规范
（4）卡住的状况
以换行的那个元素为基准，若是有浮动元素的高度大于换行的那个元素，那么当换行元素换行时会被高的那个元素“卡住”。
(5) 浮动对文字的影响 ,浮动框只会占据本身的位置，使文字能够围绕浮动框显示
一--. 浮动后的特性
1. 块级元素能够横排显示
2. 行内元素能够设置宽高
3. 元素没有设置宽高时，宽度为内容撑开宽
4. 支持margin
5. 脱离文档流
6. 不支持margin：auto。。。（浮动、绝对定位、固定定位的盒子失效。相对定位有效，可是若是left值不为0，在水平方向上不会居中，由于误差了一个left值。）
二. 清除浮动
为啥要清楚浮动呢
当不给外层div高度时：
会变成：
咱们会发现子元素浮动会形成父级盒子高度坍塌，这样若是下面在进行继续布局的话会使页面布局错乱，(下图中黄色的盒子是nav下的div)若是想要继续布局就要清除浮动了，这里我介绍几种清除浮动的方法。
清除浮动的方法
1. 父级的紧邻兄弟
给nav一个.nav{clear:both}
缺点：只是让后面的元素正常显示，并无撑开box的高度
2. 父级给高度
box给高度
缺点：通常都是元素内容撑开高度，拓展性很差
3. 父级元素 display：inline-block；
缺点：父级盒子margin：auto；失效，上部分和下面黄色中间有间隙，换行，致使了这个间隔的出现(缘由：http://www.javashuo.com/article/p-cxmpawnv-cz.html)。
4. 父级：overflow：hidden；
- 优势：简单，代码少，浏览器支持好
- 缺点：不能和position配合使用，由于超出的尺寸的会被隐藏
- 建议：只推荐没有使用position或对overflow:hidden理解比较深的朋友使用
5. 子元素：给浮动元素的末尾加一个元素，加上clear：both；
原理：这个空的div能让父级获取到高度，是由于设置以后这个div的左右都不能有浮动元素，因此这个空的div元素会向下移动，直到换行，而为了让这个div可以换行，父元素至少要包含浮动元素的高度才能提升足够的空间，这样实现清除浮动的影响。
缺点：随意添加一个空元素，不符合代码规范。
6. 当今最主流的清除浮动的方法：after伪元素清除浮动,添加给box。
clearfix:after{content:””; display:block; clear:both;}
- 兼容问题，ie6,ie7中要加上zoom。
.clearfix{zoom:1} - 优势：浏览器支持好，不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等）
- 缺点：要两句代码结合使用，才能让主流浏览器都支持
- 建议：推荐使用，建议定义公共类，以减小CSS代码
clearfix:after{
content:"";//设置内容为空
height:0;//高度为0
lineheight:
0;//行高为0
display:block;//将文本转为块级元素
visibility:hidden;//将元素隐藏
clear:both//清除浮动
}
.clearfix{
zoom:1;为了兼容IE
}
三. BFC
BFC（Block Formatting Context），块级格式化上下文，它规定了内部的块级元素的布局方式，默认状况下只有根元素（即body）一个块级上下文。
1. BFC特性：
(1) .内部的块级元素会在垂直方向，一个接一个地放置
每一个元素的margin box的左边，与包含border box的左边相接触（对于从左往右的格式化，不然相反）。即便存在浮动也是如此；
(3) .计算BFC的高度时，浮动元素也参与计算
(4). BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素；外面的元素也不会影响到容器里面的子元素；
(5)、BFC会阻止外边距叠加：通常状况，两个相邻的块级框，它们之间的垂直方向的外边距会发生叠加。 若是这两个相邻的块框不属于同一个BFC就不会叠加！
(6)、一个BFC的边框不能和它里面的元素的margin重叠。这意味着浏览器将会给BFC建立隐式的外边距来阻止它和浮动元素的外边距的叠加。当给一个挨着浮动的BFC添加负得外边距不会起做用。
2. 触发条件：
- float除了none之外的值
- overflow除了visible以外的值
- display(table-cell / table-caption / inline-block / flex / inline-flex)
- position(absolute,fixed)
3. 为何"overflow:hidden"能清除浮动的影响。
overflow 属性规定当内容溢出元素框时发生的事情，
| 值 | 描述 |
|---|---|
| visible | 默认值。内容不会被修剪，会呈如今元素框以外。 |
| hidden | 内容会被修剪，而且其他内容是不可见的。 |
| scroll | 内容会被修剪，可是浏览器会显示滚动条以便查看其他的内容。 |
| auto | 若是内容被修剪，则浏览器会显示滚动条以便查看其他的内容。 |
| inherit | 规定应该从父元素继承 overflow 属性的值。 |
BFC能够包含浮动这一特性来清除浮动
// css
.parent{
/* 具体使用哪一个要看界面设计的状况 */
/* overflow: hidden; */
/* display:inline-block; */
/* position:absolute; */
float:left;
}