浮动定位BFC边距合并
2017-03-06 本文已影响0人
ychenxi
浮动元素有什么特征？对父容器、其他浮动元素、普通元素、文字分别有什么影响?
浮动元素脱离正常的文档流，被安放到它所在容器的的左端或者右端，并且文档流中的普通元素察觉不到浮动元素。其他的文本和行内元素可以觉察到。
- 对父容器：如果父容器中的元素都是浮动元素，父容器没有设置 height 值的时候，会造成父容器高度塌陷。
- 其他浮动元素：同一父容器内的浮动元素按照设定的方向并排排列，当父元素的宽度不够时，后面的元素会向下移动，直到有足够的空间；如果浮动元素的高度不同，那么有可能挡住移动的路径。
- 普通元素：无法辨别普通元素，有可能导致覆盖其它普通元素。
- 文本：文本能够识别浮动元素，会围绕浮动元素。
清除浮动指什么? 如何清除浮动? 两种以上方法
清除浮动是要清除浮动元素造成的父容器塌陷等问题。
如何清除浮动：
-
在要清除的浮动元素下添加一个空div。将空的div的style设成
clear:both;或者用CSS建一个空div，这样可以保证html的语义性。
.clearfix{
*zoom:1; //ie 6 和 7 用这个清除浮动。
}
.clearfix:after{
content:"";
display:block; // 或者 display: table;
clear:left;
}
```
- 用BFC的性质清除浮动。
BFC其中一个性质是BFC可以包含浮动。我们就利用这个性质来清除浮动。将包含浮动元素的父元素形成新的BFC，就可以达到清楚浮动的效果。
比如将父元素设为：overflow: hidden或者display: inline-block等形成新的BFC的方法。
但是利用BFC清除浮动有它的局限性。比如使用float的时候会使父容器长度缩短，overflow属性会影响滚动条和绝对定位的元素，position会改变元素的定位方式，所以要结合当时的条件合理选择清除浮动的方法。
有几种定位方式，分别是如何实现定位的，参考点是什么，使用场景是什么？
常见的定位方式有：
-
position: static;或者不设置position值。这是定位的默认值。元素出现在正常的文档流中。（top， bottom，left，right，z-index几个属性设置都不会发生作用。） -
position: relative;相对于元素本身在文档流中的正常位置进行定位。用于进行自身的位置的局部调整或者用于子元素需要绝对定位的时候的参考点。 -
position: absolute;生成绝对定位的元素，该元素脱离文档流。相对于static定位以外的第一个祖先元素（offset parent）的内边框进行定位（top 和 left 的值为0时，绝对定位在内边框。top 和 left 值不设或者为 auto，绝对定位元素在原本文档流该在的位置）。如果找不到非默认定位的祖先。就以html的根节点(<html>)当作参考点进行偏移。http://js.jirengu.com/vapedijaxe/1/edit -
position: fixed;特殊的绝对定位。相对于浏览器的窗口进行定位。元素不会随着页面滚动而发生滚动，因为是相对于窗口进行定位，窗口是不会动的。 -
position: sticky;CSS3的新属性。当页面滚动时会随着页面发生滚动。但是当触到屏幕的顶部，元素会固定下来。当滚动下来，元素又会跟着下来。类似position: relative;和position: fixed;的合体。兼容性很差，一般不用CSS来做这种效果。
z-index 有什么作用? 如何使用?
z-index 属性指定一个元素的堆叠顺序，用于绝对定位的元素中。因为绝对定位的元素脱离了文档流，所以绝对定位的元素可以覆盖页面上的其它元素。这时可以通过给元素设置z-index属性来控制叠放顺序，拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
用 z-index: number; 进行设定。number的值越大，位于越靠上。
position:relative和负margin都可以使元素位置发生偏移?二者有什么区别
position:relative;只相对自己原本位置发生偏移，不影响其它文档流中其他元素的位置。margin：除了让元素自身发生偏移还影响其它文档流中的元素。
http://js.jirengu.com/zemikeseci/1/edit?html,css,output
BFC 是什么？如何生成 BFC？ BFC 有什么作用？举例说明
- BFC是 Block formatting contexts （块格式化上下文） 的缩写。
- 浮动，绝对定位，不是块级元素的块容器（比如 inline-blocks，table-cells 和 table-captions），'overfolw'属性不是'visible'的块级元素会形成一个新的BFC。
- BFC会阻止垂直外边距（margin-top、margin-bottom）折叠，所以可以用来解决外边距合并的问题。对于嵌套元素的外边距合并，只要把父元素设为BFC就可以了。这样子元素的margin就不会和父元素的margin发生重叠。
- BFC包含浮动。我们利用这个性质来清除浮动。将包含浮动元素的父元素形成新的BFC，就可以达到清楚浮动的效果。比如将父元素设为：
overflow: hidden或者display: inline-block等形成新的BFC的方法。
在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例
当两个相邻元素处于同一个BFC中会发生垂直外边距合并。
- 两个相邻的外边距都是正数时，折叠结果是它们两个之间较大的值。
- 两个相邻的外边距都是负数时，折叠结果是两个绝对值的较大值。
- 两个外边距是一正一负时，折 叠结果是两者的相加的和。
避免外边距合并的方法有：
- 父元素加上 padding 或 border
- 将父元素变成一个新的BFC。例如：给父元素设置
overflow: hidden;或float: left;等
