浮动元素有什么特征？对父容器、其他浮动元素、普通元素、文字分别有什么影响?
特征：
- 浮动元素的框可以向左或者向右移动，直到它的外边缘碰到父元素包含框或者另一个浮动元素的边框为止；
- 浮动元素不在文档普通流之中，因此文档普通流中的块级元素感知不到浮动元素的存在；
- 在css中任何元素都可以浮动，浮动元素会生成一个块级框，而不论该元素本身是什么元素
对父容器的影响：
浮动元素脱离文档流向左或者向右移动，直到边框碰到父元素的边缘,若父元素没有设置高度，则父元素高度塌陷，高度为0；
z-index
注释：元素可拥有负的 z-index 属性值。
注释：Z-index 仅能在定位元素上奏效（例如 relative,absolute,fixed）
该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。
position:relative和负margin都可以使元素位置发生偏移?二者有什么区别
区别：position:relative;只相对自己原本位置发生偏移，不影响其它普通流中元素的位置。margin：除了让元素自身发生偏移还影响其它普通流中的元素。除此之外，margin负值分为两种，top/left是将当前元素拉出，改变的是当前元素自身，而right/bottom是将当前元素的后续元素拉进，然后覆盖当前元素，它改变的是当前元素的后续元素
BFC 是什么？如何生成 BFC？BFC 有什么作用？举例说明
BFC是什么？BFC英文全称是block formatting context,中文翻译为块级格式上下文，在css的W3C官方文档中是这样介绍的：
**
浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文）。
在BFC中，盒子从顶端开始垂直地一个接一个地排列，两个盒子之间的垂直的间隙是由他们的margin 值所决定的。在一个BFC中，两个相邻的块级盒子的垂直外边距会产生折叠。
在BFC中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘(border-left)（对于从右到左的格式来说，则触碰到右边缘）。
**
可以先这样简单理解，即BFC是一种独立的布局模式，当元素满足上述特征时，即会为元素及其内容创建一个独立BFC布局模式，这种布局模式只对创建元素及其内容有作用，对外界其他元素则没有影响。
那么如何生成bfc呢？
简单点说，当对元素设置以下属性就可以生成BFC：
float: left | right;（浮动元素）
overflow: hidden | auto | scroll;（overflow值不为visable）
display: table-cell | table-caption | inline-block;（非块级元素）
position: absolute | fixed;（绝对定位元素）
bfc的特性：
- 只有同属于一个bfc，两个元素才会发生margin重叠
这个属性解决了嵌套元素边距嵌套的问题，给父元素设置为bfc则可解决此问题 - bfc不会重叠浮动元素
此属性作用：若希望普通流元素意识到float元素，不去覆盖它，给普通流元素加一个bfc，然后就有两个bfc就不会发生重叠了 - bfc可以包裹浮动
此属性可以用于清除浮动，将父元素设置为bfc即可解决父元素高度塌陷问题。
在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例
合并规则：外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。当同为正或同为负时，合并后的外边距的高度等于两个发生合并的外边距的高度中绝对值的较大者；当一正一负时，合并后的外边距的高度等于两个发生合并的外边距的和。
按照BFC的定义，只有同属于一个BFC时，两个元素才有可能发生垂直Margin的重叠，这个包括相邻元素，嵌套元素，只要他们之间没有阻挡(例如边框，非空内容，padding等)就会发生margin重叠。
相邻元素
由上图可知，box1、box2明明都有20px的margin；可他们相隔却只有20px；这就是发生了外边距合并。
解决办法：
原理就是将两个box的bfc设置为不同，比如用inline-block；
inline-block解决相邻元素的外边距重叠
嵌套元素的外边距重叠
解决办法：给父元素设置border、padding、overflow皆可以
padding
border
overflow
网友评论