css浮动、BFC、定位问题

摘要：元素框从文档流完全删除，并相对于其包含块定位。产生折叠的必备条件必须是邻接的而根据规范，两个是邻接的必须满足以下条件必须是处于常规文档流非和绝对定位的块级盒子并且处于同一个当中。

何谓浮动元素？有什么特征？
所谓浮动元素，即是设置了浮动属性的元素。其特征为：

1.浮动的框可以向左或者向右移动，直到它的外边缘碰到包含框（其父元素）或者另一个浮动框为止，这条属性也就意味着浮动元素可以像行内元素的样式一样水平排列，但如果高度设置存在问题，那么多个浮动元素水平排列会存在“卡住”的情况,简单的测试一下： 框3就被框1卡住了

2.浮动的框不在文档的普通流中，所以文档普通流中的块框感知不到浮动框的存在；

3.在css中任何元素都可以浮动，浮动元素会生成一个块级框，而不论该元素本身是什么元素。

对父容器、其他浮动元素、普通元素、文字分别有什么效果？
浮动最初的目的是为了实行文字的环绕效果.

- [简单测试1](http://js.jirengu.com/godicuyewi/2/edit)

 根据测试可以看出：
   - 对于处于文档普通流中的块级元素而言，它无法感知到浮动元素的存在，故实际的效果为浮动元素覆盖了块级元素的一部分，当然也可以说块级元素的一部分钻到了浮动元素的下面；
   - 而块级元素包含的文本则可以感知到浮动元素的存在（设定如此），因此环绕着浮动元素排列。
 - 那么除了文本之外，像图片（一般认为图片是行内元素），一些表单元素（如单行文本域、单行密码域、单选按钮、多选按钮、多行文本域、下拉菜单、上传域、隐藏域、提交按钮、普通按钮）这些行类元素，他们产生行类框是否能够识别到浮动元素了？这个待测试。。。。。
  
- [简单测试二](http://js.jirengu.com/viyodokeke/4/edit)
 - 如果一个父元素包含浮动元素，按照设想，应该是浮动元素在父元素的框内向左浮动或者向右浮动，然而实际测试发现，父元素未被浮动元素撑开，父元素的高度坍塌。

清除浮动指什么？
由测试2可以看出，浮动元素会脱离文档的普通流，而其父容器在普通流中，则存在父元素高度坍塌问题，如果我们希望浮动元素在其父容器内部浮动，则需要清除浮动，而浮动元素的能够浮动，是因为包围它的行框缩短了，从而给浮动元素留下了空间，浮动原理简述，而清除浮动就是让包围浮动元素的行框恢复原长度，但浮动元素客观存在（虽然不在普通文档流中），占据了一定空间，为了恢复原长度，行框应该向下或向上移动，直到左右没有浮动元素为止（即给浮动元素上面或下面添加了足够的清除空间），这样也就恢复了原长度。

如何清除浮动？
清除浮动主要是两种方法，即使用clear属性 ，或者BFC清除浮动。

W3c school中一些参考资料

css中有3中定位机制，即普通流，绝对定位以及浮动。通过position可以选择4种定位方式：

static

元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
relative
元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
absolute
元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
fixed
元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。

提示：相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。

1.普通流，即为设置元素的默认位置；

2.相对定位，即相对于元素在文档流中的默认位置进行偏移；

3.绝对定位，即相对于最近的已包含的祖先元素，如果元素没有最近的祖先元素，那么则相对于最初的包含块。

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
注释：元素可拥有负的 z-index 属性值。
注释：Z-index 仅能在定位元素上奏效（例如 position:absolute;）！
说明
该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。

取值与意义

默认。堆叠顺序与父元素相等。

number 设置元素的堆叠顺序。
inherit 规定应该从父元素继承 z-index 属性的值。

简单测试一下：

绝对定位有偏移

加了负margin也偏移了
两者的区别在于:

position:relative;只相对自己原本位置发生偏移，不影响其它普通流中元素的位置。
margin：除了让元素自身发生偏移还影响其它普通流中的元素。

BFC是什么？
BFC英文全称是block formatting context,中文翻译为块级话格式上下文（个人认为这个翻译太过直译了，应该采用意译更好），在css的W3C官方文档中是这样介绍的

Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with "overflow" other than "visible" (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents.
In a block formatting context, boxes are laid out one after the other, vertically, beginning at the top of a containing block. The vertical distance between two sibling boxes is determined by the "margin" properties. Vertical margins between adjacent block-level boxes in a block formatting context collapse.
In a block formatting context, each box"s left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch). This is true even in the presence of floats (although a box"s line boxes may shrink due to the floats), unless the box establishes a new block formatting context (in which case the box itself may become narrower due to the floats).
For information about page breaks in paged media, please consult the section on allowed page breaks.

翻译则为：
浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文）。
在BFC中，盒子从顶端开始垂直地一个接一个地排列，两个盒子之间的垂直的间隙是由他们的margin 值所决定的。在一个BFC中，两个相邻的块级盒子的垂直外边距会产生折叠。
在BFC中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘(border-left)（对于从右到左的格式来说，则触碰到右边缘）。
翻译参考

BFC如何产生？
可见官方的解释是比较晦涩的，那没可以先这样简单理解，即BFC是一种独立的布局模式，当元素满足上述特征时，即会为元素及其内容创建一个独立BFC布局模式，这种布局模式只对创建元素及其内容有作用，对外界其他元素则没有影响。

简单点说，当对元素设置以下属性就可以生成BFC：
float: left | right;（浮动元素）
overflow: hidden | auto | scroll;（overflow值不为visable）
display: table-cell | table-caption | inline-block;（非块级元素）
position: absolute | fixed;（绝对定位元素）

-BFC有什么作用（特性）？

1、BFC会阻止垂直外边距（margin-top、margin-bottom）折叠

按照BFC的定义，只有同属于一个BFC时，两个元素才有可能发生垂直Margin的重叠，这个包括相邻元素，嵌套元素，只要他们之间没有阻挡(例如边框，非空内容，padding等)就会发生margin重叠；

因此要解决margin重叠问题，只要让它们不在同一个BFC就行了，但是对于两个相邻元素来说，意义不大，没有必要给它们加个外壳，但是对于嵌套元素来说就很有必要了，只要把父元素设为BFC就可以了。这样子元素的margin就不会和父元素的margin发生重叠；

2、 BFC不会重叠浮动元素；

3、BFC可以包含浮动；
我们可以利用BFC的第三条特性来“清浮动”，这里其实说清浮动已经不再合适，应该说包含浮动。也就是说只要父容器形成BFC就可以。

BFC的问题还是需要研究，目前似懂非懂！！！！！！！！

在CSS当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个多带带的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。

当两个盒子的外边距均为正时，折叠外边距取外边距更大的那个；

当两个盒子的外边距 均为负时，折叠外边距取外边距绝对值更大的那个；

当两个盒子的外边距一正一负时，折叠外边距取两个外边距值的和。

产生折叠的必备条件：margin必须是邻接的!

而根据w3c规范，两个margin是邻接的必须满足以下条件：

1.必须是处于常规文档流（非float和绝对定位）的块级盒子,并且处于同一个BFC当中。

2.没有线盒，没有空隙（clearance），没有padding和border将他们分隔开

3.都属于垂直方向上相邻的外边距，可以是下面任意一种情况：

元素的margin-bottom与其下一个常规文档流的兄弟元素的margin-top

height为auto的元素的margin-bottom与其最后一个常规文档流的子元素的margin-bottom

高度为0并且最小高度也为0，不包含常规文档流的子元素，并且自身没有建立新的BFC的元素的margin-top和margin-bottom

以上的条件意味着下列的规则：

1.创建了新的BFC的元素（例如浮动元素或者"overflow"值为"visible"以外的元素）与它的子元素的外边距不会折叠
浮动元素不与任何元素的外边距产生折叠（包括其父元素和子元素）

2.绝对定位元素不与任何元素的外边距产生折叠
inline-block元素不与任何元素的外边距产生折叠

3.一个常规文档流元素的margin-bottom与它下一个常规文档流的兄弟元素的margin-top会产生折叠，除非它们之间存在间隙（clearance）。

4.一个常规文档流元素的margin-top 与其第一个常规文档流的子元素的margin-top产生折叠，条件为父元素不包含 padding 和 border ，子元素不包含 clearance。

5.一个 "height" 为 "auto" 并且 "min-height" 为 "0"的常规文档流元素的 margin-bottom 会与其最后一个常规文档流子元素的 margin-bottom 折叠，条件为父元素不包含 padding 和 border ，子元素的 margin-bottom 不与包含 clearance 的 margin-top 折叠。

6.一个不包含border-top、border-bottom、padding-top、padding-bottom的常规文档流元素，并且其 "height" 为 0 或 "auto"， "min-height" 为 "0"，其里面也不包含行盒(line box)，其自身的 margin-top 和 margin-bottom 会折叠。

以上引用自
文章来源
简单测试一下父子外边距合并

代码1

代码2

代码3

代码4