浮动定位BFC边距合并

2017-03-06 本文已影响0人饥人谷_tonya

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

浮动元素的特征：

浮动元素会脱离正常的文档流，按照其外边距指定的位置相对于它的上一个块级元素（或父元素）显示
浮动元素后面的块级元素的内容会向浮动元素的外边距靠齐，但是边框和背景却忽略浮动元素而向上一个非浮动元素靠齐
浮动元素后面的内联元素会向此浮动元素的外边距靠齐

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

对其兄弟元素（非浮动）的影响

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

对其兄弟元素（浮动）的影响

同一个方向的浮动元素：当一个浮动元素在浮动过程中碰到同一个方向的浮动元素时，它会紧跟在它们的后面
反方向的浮动元素：互不影响，位于同一水平线上，当空间不够时会被挤下

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

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

解决浮动父容器高度塌陷问题

父元素的最后设置 clear:both;（当添加了最后一个冗余元素（未设置clear:both）时；父元素和此冗余元素的高度都为0，并且三个浮动的元素都浮在了它们的上方盖住了它们（可以把它们看成PS中的图层）。现在，给这个冗余元素添加clear:both，它便要躲开这三个浮动元素，因此，一直往下跑，直到没有被浮动元素盖住才停下来。而父元素看到这个子元素跑开了，自然想要包裹住它。）
伪类:after写入空白元素来清

.fix::after { 
     content:""; 
     display:table; 
     clear:both;
}

给父元素添加overflow:hidden

创建了 BFC的元素就是一个独立的盒子，不过只有Block-level box可以参与创建BFC， 它规定了内部的Block-level Box如何布局，并且与这个独立盒子里的布局不受外部影响，当然它也不会影响到外面的元素。它具有以下特征：

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

浮动 (元素的 float不为 none）
绝对定位元素 (元素的 position为 absolute 或 fixed)
行内块 inline-blocks (元素的 display: inline-block)
表格单元格 (元素的 display: table-cell，HTML表格单元格默认属性)
表格标题 (元素的 display: table-caption，HTML表格标题默认属性)
overflow的值不为 visible的元素
弹性盒子 flex boxes (元素的 display: flex 或 inline-flex)

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

absolute生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
static默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

这个熟悉了就知道用哪个了，比如有些div悬浮在上方，可能就需要fixed，也就是滚动条移动时不会改变与浏览器的位子，relative可能就要相对于父结点进行定位了一般都是相对定位的

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

z-index就是网页的z轴，用相对定位绝对定位把两个层重叠在一起，z-index的值越大，就越靠上。

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

position:relative;只相对自己原本位置发生偏移，不影响其它普通流中元素的位置。
margin：除了让元素自身发生偏移还影响其它普通流中的元素。

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

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

（1）两个兄弟元素在垂直方向上合并外边距，取较大值进行合并。

#box1 {
  width:100px;
  height:100px;
  margin-bottom:20px;
}
#box2 {
  width:100px;
  height:100px;
  margin-top:10px;
}

<div id="box1">
</div>

<div id="box2">
</div>

这时两个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。

（3）外边距自己和自己合并
如果一个元素没有边框和填充，但有上下外边距，这时它的上下外边距会合并。例：

#box1 {
  margin-top:50px;
  margin-bottom:20px;
}

<div id="box1">
</div>

这时上下外边距合并成50px。
除此之外，若该元素垂直方向上的兄弟元素也有外边距，那么垂直方向的外边距依旧会发生合并。例：

#d1 {
  margin-top:50px;
  margin-bottom:20px;
}

#d2 {
  width:100px;
  height:100px;
  margin-bottom: 80px;
}
<div id="d2">
</div>
<div id="d1">
</div>

这时，外边距合并成80px。

编码1
编码2
编码3
编码4