浮动定位BFC边距合并

2017-08-13 本文已影响0人 marmot_ning

浮动元素的特征有：元素脱离普通流, 块级浮动元素在一排显示，内联元素支持宽高，没有宽度时默认内容撑开宽度，
对父容器的影响：如果父容器的子元素都是浮动元素，如果父容器没有定义高度，那么父容器会失去高度，在浮动元素之外
对其他浮动元素的影响：浮动元素可以左右移动(根据float属性值而定)，直到它的外边缘碰到包含框或者另一个浮动元素的边缘
对普通元素的影响：浮动元素后面的普通元素的框会表现的像浮动元素不存在一样
对文字的影响：如果浮动的元素后面有一个文档流中的元素，那么这个元素的框会表现的像浮动元素不存在一样，但是框的文本内容会受到浮动元素的影响:文本内容会移动以留出浮动元素的空间(文档流中的元素的框无法感知浮动元素，但是普通元素内部的文本内容能感知到浮动元素)。

position属性是指定位类型，属性值可以为：static、relative、absolute、fixed、inherit和sticky，sticky是CSS3新发布的一个属性。

static: 是position的默认值，元素处于正常的文档流中，会忽略left、top、right、bottom和z-index属性
relative: 是指给元素设置相对于原本位置的定位，元素并不脱离文档流，因此元素原本的位置会被保留，其他的元素位置不会受到影响
absolute:
1. 设置了absolute的元素如果存在有祖先元素设置了position属性不为static 属性，则这时元素的定位对象为此已设置position属性的祖先元素
2. 如果并没有设置了position属性的祖先元素，则此时相对于body进行定位
fixed: 它参照的坐标系是浏览器的窗口，固定定位的元素不随着页面滚动而移动，它会始终保持在那个位置
sticky:在屏幕范围（viewport）时该元素的位置并不受到定位影响（设置top、left等属性无效），当该元素的位置将要移出偏移范围时，定位又会变成fixed，根据设置的left、top等属性成固定位置的效果

z-index定义了z方向（与显示屏垂直的方向，值越大者堆叠显示在前面）的级别从而使元素有序堆叠显示。
ps:该属性值只对已定位的元素有效。

堆叠顺序
不对元素设position时，文档流后面的元素覆盖前面的元素。
将元素设置的position设置为relative ，absolute 或者 fixed，元素会覆盖没有设置 position 属性或者属性值为 static 的元素。
一般情况下z-index值越大者在前面。
子元素继承元素的堆叠关系，不论子元素的z-index值比父元素的兄弟元素大或者小，都继承父元素与其兄弟元素的堆叠关系。

position:relative不论偏移到何处只是占据原来的位置，而margin比较霸道——偏移的位置都要被自己占据。

BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干
生成BFC：浮动、绝对定位的元素(absolute、fixed定位)、块容器(display属性为inline-block、table、table-cell、table、table-caption)、带有overflow属性(该属性值不为visible和inherit)的display为block的块级元素会在其内部建立新的块级格式化上下文
BFC作用：元素们处于同一个块级格式化上下文时，会遵守相同的规则/格式(例如父子元素的margin会重叠，同一个BFC内的子元素上下margin会重叠)，但是处于不同的块级格式化上下文时，元素的排列展示遵守的规则/格式是不同的(处于不同的BFC的父子元素的margin不会重叠--->父级元素处于一个BFC中，父级元素内部新建一个BFC)。
示例：

BFC清理浮动