浮动定位BFC边距合并

2017-03-31 本文已影响0人 zx9426

QQ截图20170518154322.png
](https://img.haomeiwen.com/i4994499/95b5ee125ade0449.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

relative:生成相对定位的元素，通过top,bottom,left,right的位置相对于其正常位置进行定位。其中的相对指的是相对于元素在默认流中的位置。

注意：

1.将元素position属性设置为relative之后，再通过top,bottom,left,right属性对其进行相对于原来位置的偏移；

2.元素偏移之后，他本来在默认文档流中占据的位置仍然存在，其紧挨其后的元素的定位依据它本来的位置定位；

3.该元素偏移之后，可能存在覆盖其他元素的情况，可以使用z-index属性显示层级有限级别。

示例：

第二个盒子元素相对于之前的位置向下平移了20px,向右平移了30px。

要想使第三个块级元素被遮挡的部分浮现出来，我们可以使用如下代码实现：

注意：使用z-index必须保证元素的样式中含有定位方式，之前忘了给box3添加定位方式，导致z-index对box3不起作用。

absolute：生成绝对定位的元素，相对于static定位外的第一个父元素进行定位。
注意：

1.绝对定位的元素已经脱离了文档流，普通流中其他元素的布局就像绝对元素不存在一样；

2.绝对定位的元素的位置是相对于最近的已定位的祖先元素，如果元素没有已定位的祖先元素，它的位置就相对于body；

3.绝对定位的框可以覆盖页面的其他元素。

示例：

这种情况是离box2最近的父元素已定位的情况，如果离box2最近的父元素没有定位的话，示例如下：

fixed：本质上是一种绝对定位，不为元素预留空间。通过指定相对于屏幕视窗的位置来指定元素的空间，且元素的位置在屏幕滚动时不会发生变化。应用于很多网站顶端的固定导航、右下角的固定广告等等。
示例：

absolute, relative, fixed偏移的参考点分别是什么？

absolute偏移的参考点是：相对于最近的已定位的父元素，如果没有，则相对于body元素；

relative偏移的参考点是：相对于元素在普通流中的原来位置；

fixed偏移的参考点是：相对于浏览器窗口。

z-index 有什么作用? 如何使用?

z-index属性用于设置节点的堆叠顺序，拥有更高堆叠顺序的节点将显示在堆叠顺序较低的节点前面。

使用方法：示例

1.z-index仅对定位元素有效（position:relative||absolute||fixed）;

2.z-index只可比较同级元素

position:relative和负margin都可以使元素位置发生偏移?二者有什么区别？

position:relative和负margin都可以使元素位置发生偏移，二者的区别表现在：

负margin会使元素在文档流中的位置发生偏移，它会放弃偏移之前占据的空间，紧挨其后的元素会填充这部分空间；
相对定位后元素位置发生偏移，它仍会坚守原来占据的空间，不会让文档流的其他元素流入。

如何让一个固定宽高的元素在页面上垂直水平居中?

可以使用绝对定位和负margin,示例：

浮动元素有什么特征？对其他浮动元素、普通元素、文字分别有什么影响?

浮动元素的特征有：

1.块在一排显示；
2.内联元素支持宽高；
3.无论是块元素还是内联元素，没有宽度时默认内容撑开宽度；
4.脱离文档流；
5.提升层级半级。
对其他浮动元素的影响：后浮动的元素永不会超过先浮动元素的顶端。

对普通元素的影响：浮动元素会从文档正常流中删除，使得紧挨它的元素位置发生偏移，影响布局。

对文字的影响：浮动元素向下延伸时，不会影响正常文本的显示，文本会相对于浮动元素进行偏移。但部分文本背景会被浮动元素遮住。
浮动示例：

清除浮动指什么? 如何清除浮动?

清除浮动指的是：在非IE浏览器（如Firefox）下，当容器的高度为auto,且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响布局的现象，为了防止这个现象的出现而进行的CSS处理，就叫CSS清除浮动。

清除浮动的方法：

1.使用带clear属性的空元素

在浮动元素后使用一个空元素如 <div class="clear"></div> ，并在CSS中赋予 .clear{clear:both;} 属性即可清理浮动。亦可使用 <br class="clear" /> 或 <hr class="clear" /> 来进行清理。

2.使用CSS的overflow属性

给浮动元素的容器添加overflow:hidden;或overflow:auto;可以清除浮动，另外在 IE6 中还需要触发 hasLayout ，例如为父元素设置容器宽高或设置 zoom:1。

3.使用CSS的:after伪元素

附加：关于使用clear:both清除浮动，一直都不太明白，还有就是对清除浮动的理解有误，以为清除浮动之后，元素的渲染顺序和普通流一样，实际不是这样的，下面给出我自己的理解，不足之处，欢迎大家批评指正。

关于浮动
如下代码中：

在父容器中添加一个背景图片，图片会按照普通流渲染

若是在此基础上给背景图片添加浮动，效果如下：

我们可以看到父元素高度塌陷，背景图片脱离文档流，所以此时父容器div补给高度了，让我们给父容器添加点文字看看它的高度变化

父容器的高度被撑开了。

所以子元素浮动使得父元素塌陷的原因是：因为没有预先设置div高度，所以div高度由其包含的子元素高度决定。而浮动脱离文档流，所以图片并不会被计算高度。此时的div中，相当于div中子元素高度为0。

文字环绕

为什么情况二中box2的宽度比情况一中box2的宽度大，情况二中的box2可以浮动上去，而情况一中的不可以呢？
因为情况一中宽度限制100px，所以box2文字不能靠右围绕，所以只能往下。对于情况2，因为宽度为200px，所以box2在这个宽度内可以围绕box1

关于clear:both 的理解：
Clear:both;其实就是利用清除浮动来把外层的div撑开，所以有时候，我们在将内部div都设置成浮动之后，就会发现，外层div的背景没有显示，原因就是外层的div没有撑开，太小，所以能看到的背景仅限于一条线。

z-index 有什么作用? 如何使用?

z-index是针对网页显示中的一个特殊属性，因为显示器是显示的图案是一个二维平面，拥有x轴和y轴来表示位置属性。为了表示三维立体的概念如显示元素的上下层的叠加顺序引入了z-index属性来表示z轴的区别。表示一个元素在叠加顺序上的上下立体关系。

z-index值较大的元素将叠加在z-index值较小的元素之上。对于未指定此属性的定位对象，z-index 值为正数的对象会在其之上，而 z-index 值为负数的对象在其之下。
示例：

第二个div遮住了第一个div，对第二个添加z-index属性，结果就会变成这个样子，z-index 最简单的应用就是这样

只对定位元素有效

z-index属性适用于定位元素（position属性值为 relative 或 absolute 或 fixed的对象），用来确定定位元素在垂直于显示屏方向（称为Z轴）上的层叠顺序，也就是说如果元素是没有定位的，对其设置的z-index会是无效的。
虽然第一个div的z-index比第二个div大，但是由于第一个div未定位，其z-index属性未起作用，所以仍然会被第二个div覆盖。

相同z-index谁上谁下

相同的z-index其实有两种情况

1.如果两个元素都没有定位发生位置重合现象或者两个都已定位元素且z-index相同发生位置重合现象，那么按文档流顺序，后面的覆盖前面的。

BFC 是什么？如何生成 BFC？BFC 有什么作用？举例说明

在了解BFC之前，我们先要明白两个概念：Box 和 Formatting Context。

Box: CSS布局的基本单位

Box是CSS布局的对象和基本单位，直观点来说，页面上任何一个元素都可以看成Box，Box分block-level，inline-level和匿名的。元素的类型和display属性，决定了这个Box的类型。不同类型的Box会参与不同的Formatting Context（一个决定如何渲染文档的容器），因此Box内的元素会以不同的方式渲染。让我们看看有哪些盒子：
1、block-level box: display 属性为 block, list-item, table 的元素会生成 block-level box。并且参与 block fomatting context；
2、inline-level box: display 属性为 inline, inline-block, inline-table 的元素会生成 inline-level box。并且参与 inline formatting context；
3、run-in box: css3 中才有，这儿先不讲了。
“block-level box一定会产生block formatting context”的说法是错误的，block-level box须通过设置如overflow不为visible(IE6/7无效，可以设zoom)、float不为none等等来创建block formatting context。

Formatting context

Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。最常见的 Formatting context 有 Block fomatting context (简称BFC)和 Inline formatting context (简称IFC)。

CSS2.1 中只有 BFC 和 IFC, CSS3 中还增加了 GFC 和 FFC。

w3c中BFC的定义：

官方链接下面是定义的中文翻译：

浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文）。

在BFC中，盒子从顶端开始垂直地一个接一个地排列，两个盒子之间的垂直的间隙是由他们的margin 值所决定的。在一个BFC中，两个相邻的块级盒子的垂直外边距会产生折叠。

在BFC中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘(border-left)（对于从右到左的格式来说，则触碰到右边缘）。

BFC的通俗理解：

首先BFC是一个名词，是一个独立的布局环境，我们可以理解为一个箱子（实际上是看不见摸不着的），箱子里面物品的摆放是不受外界的影响的。转换为BFC的理解则是：BFC中的元素的布局是不受外界的影响，并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。
BFC的布局规则：

1.内部的Box会在垂直方向，一个接一个地放置。
2.Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的垂直方向的margin会重叠
3.每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
//以上3点的BFC对内的布局规则，下面3点是BFC对外的布局规则
4.BFC的区域不会与float box重叠。
5.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。(这一条非常重要！！)
6.计算BFC的高度时，浮动元素也参与计算

哪些元素会生成BFC？

1.根元素(整个页面就是一个大的BFC)
2.float属性不为none
3.position为absolute或fixed
4.display为inline-block, table-cell, table-caption, flex, inline-flex
5.overflow不为visible

下面来看几个例子：

1、防止margin重叠：

首先来看看上下margin重叠的情况：

上面p元素的margin-buttom加上下面p元素的margin-top等于200px，现在却只有100px，那么问题来了：margin为什么会重叠？根据BFC布局规则的第二条我们得知，同一个BFC中的相邻Box垂直方向的margin会重叠，故要解决margin重叠问题，只需要让两个p元素处于不同的BFC就ok了。

当用div包含第二个p元素会形成BFC，margin不再重叠。因为现在两个p元素在不同的BFC中：第一个p元素处于根元素BFC中，第二个p元素处于类名为wrap的div形成的BFC中

2.左右两栏布局

效果分析：根元素会形成一个BFC，根据BFC布局规则的第三条我们得知，每个元素的margin box的左边，与包含块border box的左边相接触，即便有浮动元素也是如此，所以类名为right的box的左边界会和包含块的左边对齐。

如何形成左右分开的两栏布局呢？其实只要让右边的div形成BFC就可以了。因为BFC布局规则第4条规定：BFC的区域不会与float box重叠。

改进后的代码如下：

** 3.清理内部浮动**

不过这种清理内部浮动的方法并不推荐，这里只是为了演示BFC的作用原理。
**嵌套元素边距重叠： **
首先来看代码：

从效果图上可以看出，内层div的上下margin并没有撑开外层div，反而使得外层div距离顶部和底部50px。解决这个问题，我们可以使外层div形成BFC。因为BFC是页面上的独立容器，里面的元素不会影响外面的元素，故在计算BFC的高度的时候，会把子元素的margin值也计算在内。所以可以使外层div形成BFC来解决嵌套元素边距叠加的问题。#

BFC的作用：

（1）解决margin重叠问题。所谓margin重叠是指处于同一个BFC的相邻元素、嵌套元素，只要它们之间没有阻挡（如：边框、非空内容、padding等）就会发生margin重叠。这时只要让其中一个元素生成新的BFC就能解决margin重叠问题。
（2）清除浮动影响。因为BFC可以包含浮动，所以让父容器生成新的BFC可以让父容器在视觉上包围了浮动的子元素，因而清除了子元素浮动造成父容器高度塌陷问题。

** 在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例**

块级元素的上外边距（margin-top）与下外边距（margin-bottom）有时会合并为单个外边距，这样的现象称之为外边距合并。

** 下面三种场景下会出现外边距合并： **

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

父子元素：当一个元素包含在另一个元素中时（如没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。

空块元素：如果存在一个空的块级元素，其 border、padding、inline content、height、min-height 都不存在，那么此时它的上下边距中间将没有任何阻隔，此时它的上下外边距将会合并。

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

这就是一系列的段落元素占用空间非常小的原因，因为它们会发生合并，形成一个小的外边距。

阻止外边距合并：
形成BFC 可以阻止外边柜合并，给元素添加浮动，绝对定位，display：inline-block，父子元素情况下，给父元素添加overflow：hidden 或 auto也可以阻止。^

margin负值

margin负值的原理
为了方便理解负值margin，我们引入参考线的定义，参考线就是就是margin移动的基准点，而margin的值就是移动的数值。
margin的参考线有两类，一类是top、left，它们以外元素作为参考线，另一类是right、bottom，它们以自身作为参考线。
简单点说就是：

top负值就是以包含块(Containing block) 内容区域的上边或者上方相连元素 margin 的下边为参考线;
left负值就是以包含块(Containing block) 内容区域的左边或者左方相连元素 margin 的右边为参考线;
right负值就是以元素本身border的右边为参考线；
bottom负值就是以元素本身border的下边为参考线；

另外关于包含块的定义具体请参考KB008包含块(Containing block)

下面这张图很直观地解释了margin的移动，其中红色箭头表示正值时候的移动方向，当margin为负值的时候就反方向移动。