浮动定位BFC边距合并

浮动元素的特征和影响

特征：浮动模型也是一种可视化格式模型，浮动的框可以左右移动（由float属性的值决定）直到它的外边缘碰到包含框或另一个浮动元素的框的边缘，浮动元素不在文档的普通流中，文档的普通流中的元素表现的就像浮动元素不存在一样。
正常情况下父盒子没有设置高度，那么父盒子高由其中的子元素撑开，当给子元素浮动后，子元素脱离文档流向左或右移动知道碰到父盒子边框，因浮动不占据原来位置所以会引起父盒子高度塌陷
对于其它浮动元素，各自依据float的值向左或右移动排列，如果父盒子宽不够则向下移动直到有足够空间，当几个浮动元素的高不一样时会有卡住的可能
对于普通元素，普通文档流渲染到浮动元素时，元素浮动不占据原来的位置，其后面的元素会被浮动元素覆盖
对于文字，文字能感受到浮动元素并围绕浮动元素排列，术语：浮动元素旁边的行框被缩短，从而给浮动元素留出空间，行框围绕浮动元素。

清除浮动

浮动元素不占据原来位置因此会引起父元素高度塌陷问题，清除浮动就是清除浮动给父元素带来的高度塌陷问题。
清除浮动思路：

• 设置clear:both能清除浮动，并撑开父元素。(clear 属性的值规定元素的哪一侧不允许其他浮动元素。)
• 让父容器BFC

盒子定位

CSS定位有三种基本定位方式：普通流、浮动和绝对定位
普通流是HTML的默认定位方式，position：static／relative属于普通定位，但是relative元素可以设置top／left设置后元素还占据原来位置，对其他元素不产生影响，但自己会在自己原来的位置发生偏移，一般用于页面中的小icon。
float定位会让元素浮动block元素不占据一行而是由float的值来向左／有移动并会对后面和父元素产生影响，常用于导航栏等需要横向排列的元素
绝对定位，有两种：position：absolute／fixed
绝对定位的元素的位置是相对于最近的非static祖先元素来决定，如果元素没有已经定位的祖先元素，那就相对于html来定位。但fixed是固定定位，它的包含框是viewport，常用于相对屏幕窗口固定的低栏
z-index：元素设置成绝对定位后就会脱离文档流，并且会失去占用的空间，而且偏移的位置越近就会造成重叠的问题。这就用到z-index属性，这个属性表示叠加的顺序，默认情况下z-index为0，在同一层叠上下文中，值越高的元素层级越高，就可以盖住低于其层级的元素。如果两个元素的层级相同，则越往后的元素会覆盖前面的元素，默认情况下，第二个元素就会盖住第一个元素。

position：relative和magin

relative：元素还占据原来的位置，但会视觉上的效果会相对原来的位置发生偏移，不会对其他元素产生影响
margin：给元素添加外边距，元素真正的位置和视觉上的位置都会发生变化，会影响周围相邻元素

BFC

Block Format Content格式化上下文
是页面 CSS 视觉渲染(visual CSS rendering)这个过程中的一个概念。它是决定块盒子的布局及浮动元素相互影响的一个因素。具有对内部元素的包裹性及对外部元素的独立性。

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

1. 照BFC的定义，只有同属于一个BFC时，两个元素才有可能发生垂直Margin的重叠，这个包括相邻元素，嵌套元素，只要他们之间没有阻挡(例如边框，非空内容，padding等)就会发生margin重叠。
2. 因此要解决margin重叠问题，只要让它们不在同一个BFC就行了，但是对于两个相邻元素来说，意义不大，没有必要给它们加个外壳，但是对于嵌套元素来说就很有必要了，只要把父元素设为BFC就可以了。这样子元素的margin就不会和父元素的margin发生重叠了。

• BFC不会重叠浮动元素
• BFC可以包含浮动

当元素形成BFC时可以达到清浮动的效果
BFC的形成：
float：right／left；
overflow：hidden／auto／scroll
display：table-cell／table-caption／inline-block
position：absolute／fixed

外边距合并

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。
合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

简单地说，外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。请看下图：

![Upload 屏幕快照 2017-08-09 上午9.49.06.png failed. Please try again.]
当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。

屏幕快照 2017-08-09 上午9.49.16.png

假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并

屏幕快照 2017-08-09 上午9.49.24.png

如果这个外边距遇到另一个元素的外边距，它还会发生合并

屏幕快照 2017-08-09 上午9.49.30.png

在负外边距的情况下，合并后的外边距为最大正外边距与最小的负外边距之和（即负边距中绝对值最大的一个），如两个兄弟元素，上面的元素的下边距为20px，下面的元素的上边距为-20px,那么发生外边距合并后，这两个元素的实际距离将变成0px。

阻止外边距合并
防止元素与子元素margin重叠：

1. 用内层元素的margin通过外层元素的padding代替；
2. 内层元素透明边框 border:20px solid transparent/父元素background-color;
3. 给外层元素 overflow:hidden;/overflow:auto;
   防止元素与子元素、与父元素。与相邻元素的重合：
4. 设置元素绝对定位 postion:absolute;或float:left;或display:inline-block;