有关浮动定位BFC边距合并问题搜集

1.浮动元素有什么特征?对父容器、其他浮动元素、普通元素、文字分别有什么影响?

浮动元素不在文档的普通流中,它可以根据float属性值而左右移动,直到它的外边缘碰到包含框或者另一个浮动元素的框的边缘才停止移动。

  • 对父容器的影响:如果父容器内的子元素是浮动元素,那么父容器会失去高度,形成父容器塌陷,在浮动元素之外。
  • 对其它浮动元素的影响:如果包含块太窄无法容纳水平排列的全部浮动元素,那么其它浮动元素会向下移动,直到有足够的空间,而如果浮动元素的高度不同,那么向下移动的时候可能会被“卡”住。
  • 对普通元素的影响:普通元素感知不到浮动元素,继而占据浮动元素原有的位置,但会被浮动元素遮罩。
  • 对文字的影响:文字可感知到浮动元素,会留出空间,形成环绕的效果。

2.清除浮动指什么? 如何清除浮动? 两种以上方法

  1. 空标签清浮动:在父元素的子元素的最后添加一个没有高度的空的块标签,并且设置属性 clear:both;
  2. 使父元素形成新的BFC,可以使用的属性:
  • overflow:hidden/auto/scroll
  • display:inline-block
  • float 等等

但是这类方法会带来不同的副作用,需要考虑自身需求,去选择合适的属性去实现效果。

  1. 使用伪元素清楚浮动。目前比较标准无副作用的实现方式:
.clearfix{
zoom:1;   /*此段是在确定IE6下也可实现效果*/
}
.clearfix:after{ 
content:"";
display:block;
visible:hidden;
clear:both;
}

3.有几种定位方式,分别是如何实现定位的,参考点是什么,使用场景是什么?

定位的属性:

属性
inherit 规定应该从父元素继承 position 属性的值
static 默认值,没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)
relative 生成相对定位的元素,相对于元素原本的位置进行定位
absolute 生成绝对定位的元素,相对于static定位以外的第一个祖先元素(offset parent)进行定位,元素的位置通过 left, top, right 以及 bottom 属性进行规定
fixed 生成绝对定位的元素,相对于浏览器窗口进行定位。元素的位置通过 left, top, right 以及 bottom 属性进行规定
sticky CSS3新属性,表现类似position:relative和position:fixed的合体,在目标区域在屏幕中可见时,它的行为就像position:relative; 而当页面滚动超出目标区域时,它的表现就像position:fixed,它会固定在目标位置

这些属性,比较常用的就是 relative;absolute;fiexd三个属性

对于新属性sticky


sticky

可以看到,他的兼容性比较差,所以一般不使用它实现效果,而是采用javascrip来实现。

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

因为绝对定位的元素脱离了普通流,所以绝对定位的元素可以覆盖页面上的其它元素。这时可以通过给元素设置z-index属性来控制叠放顺序,该属性值越高,元素位置越靠上。

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

position:relative;只相对自己原本位置发生偏移,不影响其它普通流中元素的位置。


position:relative

margin:除了让元素自身发生偏移还会影响其它普通流中的元素。


margin

6.BFC 是什么?如何生成 BFC?BFC 有什么作用?举例说明

BFC是块级格式上下文。其定义是:浮动、绝对定位(绝对定位、固定定位)元素、块级容器(如inline-block、 table-cell、table-caption)并不是块级盒子,还包括哪些overflow属性值取值visible以外的块级盒子,会为它们的内容物创建一个新的块级格式化上下文。对元素设置以下属性就可以生成BFC:
float: left | right;
overflow: hidden | auto | scroll;
display: table-cell | table-caption | inline-block;
position: absolute | fixed;
原理大致是这样:
在没有BFC的情况下,两块的margin会相互折叠。
代码:

<div style="width: 200px;height: 200px;background: #cccccc;margin-bottom: 30px;"></div>
<div style="width: 200px;height: 200px;background: #333333;margin-top: 30px;margin-bottom:30px;">   </div>
<div style="width: 200px;height: 200px;background: #666666;margin-top: 50px;"></div>

如图:

alt text

可以看到上下两个div的margin折叠了,第一个div的margin-bottom和第二个div的margin-top折叠为了30px,第二个div的margin-bottom和第三个div的margin-top折叠为了50px,而这个折叠本质是块级盒block-level box下的margin-box的折叠,后面会讲到如果再到这几个div的外面一层再包裹一个拥有BFC的元素的话,他们之间的margin便不会折叠了,因为BFC里面的盒子和其外面的盒子间是不会有任何影响的。关于margin折叠方面的还有很多细节,可以参考官方文档:collapsing-margins
现在我们再来看一下使用BFC以后的效果,代码:

<div style="overflow: auto;width: 100%;">
    <div style="float: left;width: 100%;">
        <div style="margin-bottom: 30px;width: 100px;height: 100px;background-color: #cccccc;"></div>
    </div>
    <div style="float: left;width: 100%;">
        <div style="margin-top: 50px;width: 100px;height: 100px;background-color: #333333;"></div>
    </div>
</div>

结果如下:


Alt text

可以看到,上面示例中的上面灰色div和下面黑色div的margin并没有重叠,这是因为那两个float的父盒子在为它下面的盒子创建了一个BFC,从而将float盒子里面的子盒子给隔离了起来,因此也就不会margin折叠了,这只是创建BFC的一个方法,其它的还有overflow:hidden等,而在这个BFC下的盒子都是遵循BFC的布局规则的。
然后,当块级盒block-level box外层没有BFC作保护,有margin折叠时,是这样的:


而当块级盒block-level box外层有BFC作保护时(比如给下图灰色边框线盒子一个float:left),则是这样的:


同时BFC下的盒子是按照BFC的规则从上往下一个接一个的排列,并且存在外边距折叠的,你可以通过在这层BFC下再去嵌套BFC来阻止下面盒子的外边距折叠

BFC的作用有:
(1) 解决margin重叠问题。所谓margin重叠是指处于同一个BFC的相邻元素、嵌套元素,只要它们之间没有阻挡(如:边框、非空内容、padding等)就会发生margin重叠。这是只要让其中一个元素生成新的BFC就能解决margin重叠问题。
(2) 清除浮动。因为BFC可以包含浮动,所以让父容器生成新的BFC可以让父容器在视觉上包围了浮动的子元素,因而清除了浮动。
原文章地址

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

外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
(1)两个兄弟元素在垂直方向上合并外边距,取较大值进行合并。

#d1 {
  width:100px;
  height:100px;
  margin-bottom:20px;
}
#d2 {
  width:100px;
  height:100px;
  margin-top:10px;
}

这时两个div在垂直距离上的外边距进行了合并,合并后的值是20px。

(2)父子元素间没有阻挡(如:边框、非空内容、padding等)时发生上和/或下外边距合并。
例:

<div class=”parent”>
    <div class=”child”>
    </div>
</div>

.parent{
    width: 200px;
    height: 100px;
    margin-top:10px;
    background-color: red;
}
.child{
       width: 100px;
       height: 100px;
       margin-top:30px;
       background-color: yellow;
 }

这时就会发生合并。合并后的外边距是30px。

关于外边距合并:

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

  • 当一个元素出现在另一个元素上面时,第一个元素的下外边距与第二个元素的上外边距会发生合并:


    CSS外边距合并的问题
代码实验
  • 当一个元素包含在另一个元素中时(假设没有内边距或边框把外边距分隔开),它们的上和/或下外边距也会发生合并:


    CSS外边距合并的问题
  • 外边距甚至可以与自身发生合并
    假设有一个空元素,它有外边距,但是没有边框或填充。在这种情况下,上外边距与下外边距就碰到了一起,它们会发生合并:


    自身发生合并

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


    自身发生合并
    这就是一系列的段落元素占用空间非常小的原因,因为它们的所有外边距都合并到一起,形成了一个小的外边距。

外边距合并的意义:

外边距合并初看上去可能有点奇怪,但是实际上,它是有意义的。以由几个段落组成的典型文本页面为例。第一个段落上面的空间等于段落的上外边距。如果没有外边距合并,后续所有段落之间的外边距都将是相邻上外边距和下外边距的和。这意味着段落之间的空间是页面顶部的两倍。如果发生外边距合并,段落之间的上外边距和下外边距就合并在一起,这样各处的距离就一致了。

外边距合并的意义

需要注意的是:只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。
参考文献

代码题

代码1
代码2
代码3
代码4

推荐阅读更多精彩内容

  • relative:生成相对定位的元素,通过top,bottom,left,right的位置相对于其正常位置进行定位...
    zx9426阅读 388评论 0 2
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 9,836评论 1 88
  • 一,浮动元素有什么特征?对父容器、其他浮动元素、普通元素、文字分别有什么影响? 浮动模型是一种可视化格式模型,浮动...
    DeeJay_Y阅读 364评论 0 4
  • 1. 浮动元素有什么特征?对父容器、其他浮动元素、普通元素、文字分别有什么影响? 浮动元素的特征:CSS设计flo...
    饥人谷_邵征鹏阅读 94评论 0 0
  • 1.浮动元素有什么特征?对父容器、其他浮动元素、普通元素、文字分别有什么影响? 特征:浮动元素脱离普通文档流,普通...
    山门龙龙阅读 64评论 0 2