浮动定位BFC边距合并

2017-03-23 本文已影响0人荣_Rong

浮动元素的特征：
（1）浮动元素会脱离正常的文档流。
（2）浮动元素后面的块级元素的内容会向此浮动元素的外边距靠齐，但是边框和背景却忽略浮动元素而向上一个任意非浮动元素靠齐。
（3）浮动元素后面的内联元素会向此浮动元素的外边距靠齐。

对父容器的影响
对于其父元素来说，元素浮动之后，它脱离当前正常的文档流，所以它也无法撑开其父元素，造成父元素的塌陷。

对其他浮动元素的影响
当一个浮动元素在浮动过程中碰到同一个方向的浮动元素时，它会紧跟在它们后面。当空间不够时会被挤下

对普通元素的影响
块级元素会忽视浮动元素的而占据它的位置，并且元素会处在浮动元素的下层（并且无法通过z-index属性改变他们的层叠位置），但它的内部文字和其他行内元素都会环绕浮动元素。
内联元素会环绕浮动元素排列。

对文字的影响
当一个元素浮动时，在没有清除浮动的情况下，它无法撑开其父元素，但它可以让自己的浮动子元素撑开它自身，并且在没有定义具体宽度情况下，使自身的宽度从100%变为自适应（浮动元素display:block）。其高度和宽度均为浮动元素高度和非浮动元素高度之间的最大值。

box模型里使用了浮动属性，导致父级box模型不能被撑开。产生了背景不能显示，边框不能撑开，margin padding设置值不能正确显示等负作用。此时就需要清除浮动。

（1）

clear:both

（2）

BFC特性：可以包含浮动。也就是说只要父容器形成BFC就可以，简单看看如何形成BFC。

float为 left|right

（3）

   .#:after{
       content:"";
       display:block;
       clear:both;

值	属性
inherit	规定应该从父元素继承 position 属性的值。
static	默认值,没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
relative	生成相对定位的元素，相对于元素本身正常位置进行定位,因此，left:20px 会向元素的 left 位置添加20px。
absolute	生成绝对定位的元素，相对于static定位以外的第一个祖先元素（offset parent）进行定位,元素的位置通过 left, top, right 以及 bottom 属性进行规定。
	absolute相当于脱离了文档流，与浮动元素的区别是：absolute对下面的文本不会产生影响，浮动元素会影响下面的文本。
fixed	生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 left, top, right 以及 bottom 属性进行规定。
sticky	CSS3新属性，表现类似position:relative和position:fixed的合体，在目标区域在屏幕中可见时，它的行为就像position:relative; 而当页面滚动超出目标区域时，它的表现就像position:fixed，它会固定在目标位置。

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

该属性仅适用于定位元素。即拥有 relative, absolute, fixed属性的 position 元素

BFC的全称是 Block Format Content。直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

生成BFC：

float 为 left|right

BFC作用：

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

因此要解决margin重叠问题，只要让它们不在同一个BFC就行了，但是对于两个相邻元素来说，意义不大，没有必要给它们加个外壳，但是对于嵌套元素来说就很有必要了，只要把父元素设为BFC就可以了。这样子元素的margin就不会和父元素的margin发生重叠。
（2）BFC不会重叠浮动元素，用于自适应两栏布局。
（3）BFC可以包含浮动，清除内部浮动。

不合并情况：
（1）通过对父元素建立border，padding，或者间隔。
（2）创建BFC可使得两者不合并。
（3）浮动元素不合并。
（4）绝对定位元素不合并。
（5）根元素不合并。