边距合并,浮动元素
浮动元素有什么特征？
- 元素浮动之后不占据原来的位置
- 浮动的盒子在一行上显示
- 行内元素浮动之后转换为具备有块级元素的特征，可以设置宽高
浮动元素对父容器、其他浮动元素、普通元素、文字分别有什么影响?
- 如果父容器的子元素都是浮动元素，如果父容器没有定义高度，那么父容器会失去高度，在浮动元素之外。
- 对于普通元素，普通元素会感知不到浮动元素当然存在，如果宽高合适，后面的元素会占据浮动元素原来的位置
- 对于文字来说，能感知到浮动元素的存在，如果位置足够，就能够实现文本绕图的效果
清除浮动指什么? 如何清除浮动? 两种以上方法
清除浮动不是不要浮动，而是清楚浮动带来的不利影响
- 使父元素形成新的BFC，可以使用
overflow：hidden/auto/scroll``display:inline-blockfloat:方位等等 - 使用伪元素清楚浮动(解决父容器浮动元素影响),如
.clearfix{zoom:1;}
或者.clearfix:after{ content:"";display:block;visible:hidden;clear:both;} - 使用clear属性
clear: both;解决周围浮动元素影响.
然后在需要清除浮动的元素进行调用。
有几种定位方式，分别是如何实现定位的，参考点是什么，使用场景是什么？
-
inherit 规定应该从父元素继承 position 属性的值
-
static默认值,没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）
-
relative生成相对定位的元素，相对于元素本身正常位置进行定位,因此，left:20px会向元素的 left 位置添加20px(即向右偏移20px)
-
absolute生成绝对定位的元素，相对于static定位以外的第一个祖先元素（offset parent）进行定位,元素的位置通过 left, top, right以及 bottom 属性进行规定
-
fixed生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 left, top, right 以及 bottom 属性进行规定
-
sticky,CSS3新属性，表现类似position:relative和position:fixed的合体，在目标区域在屏幕中可见时，它的行为就像position:relative; 而当页面滚动超出目标区域时，它的表现就像position:fixed，它会固定在目标位置普通流与相对定位
-
CSS有三种基本的定位机制：普通流，相对定位和绝对定位．普通流是默认定位方式，在普通流中元素框的位置由元素在html中的位置决定，元素position属性为static或继承来的static时就会按照普通流定位，这也是我们最常见的方式相对定位比较简单，对应position属性的relative值，如果对一个元素进行相对定位，它将出现在他所在的位置上，然后可以通过设置垂直或水平位置，让这个元素相对于它自己移动，在使用相对定位时，无论元素是否移动，元素在文档流中占据原来空间，只是表现出来的位置会改变.
-
绝对定位与固定定位相对定位可以看作特殊的普通流定位，元素位置是相对于它在普通流中位置发生变化，而绝对定位使元素的位置与文档流无关，也不占据文档流空间，普通流中的元素布局就像绝对定位元素不存在一样
绝对定位的元素的位置是相对于距离最近的非static祖先元素位置决定的。如果元素没有已定位的祖先元素，那么他的位置就相对于初始包含块html来定位
因为绝对定位与文档流无关，所以绝对定位的元素可以覆盖页面上的其他元素，可以通过z-index
z-index 有什么作用? 如何使用?
-
z-index属性指定一个元素的堆叠顺序。因为绝对定位的元素脱离了普通流，所以绝对定位的元素可以覆盖页面上的其它元素。这时可以通过给元素设置z-index属性来控制叠放顺序，拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。 -
z-index有三个属性auto默认,堆叠顺序与父元素相等。number设置元素的堆叠顺序。inherit规定应该从父元素继承z-index属性的值。
position:relative和-margin都可以使元素位置发生偏移?二者有什么区别
position:relative;只相对自己原本位置发生偏移，不影响其它普通流中元素的位置。-margin：除了让元素自身发生偏移还影响其它普通流中的元素。
BFC 是什么？如何生成 BFC？BFC 有什么作用？举例说明
- BFC是指块级元素格式化，在同一个BFC中，元素会遵守一些规则，如从上到下排列，边距合并等，如果是相邻两个元素分别处于两个BFC当中，则一般不会遵循这些规则。
- 形成新的BFC，可以使用
overflow：hidden/auto/scroll``display:inline-blockfloat:方位position - 作用：（1） 解决margin重叠问题，在同一个BFC中，相邻元素之间的边距会合并，如果把这两个元素分别放在两个BFC中，那么他们的边距就不会合并。一般应用于嵌套关系。（2）清除浮动。BFC不会重叠浮动元素。
在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例
- 出现合并的场景：根据BFC的定义，只有同属一个BFC时，两个元素才有可能发生垂直margin的重叠，这个包括相邻元素，嵌套元素(只要他们之间没有阻挡（例如边框，非空内容，padding等)）就会发生marging重叠
- 合并的类型有：相邻兄弟元素外边距合并；父子元素外边距合并 ；非兄弟非父子元素外边距合并；自身外边距合并（content为0，上下margin产生合并）
- 如何合并：两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值;两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值;两个外边距一正一负时，折叠结果是两者的相加的和
- 如何不让相邻元素合并：为父元素设置 BFC 或 padding 或 border ;兄弟元素间设置 float 或 inline-block 或 absolute.
body{ width:300px; height:300px; border:1px solid; } .parent{ background:yellow; margin-top:10px; } .child{ background:red; margin-top:30px; } <body><div class="parent"><div class="child">红色</div></div></body>
这时候你外边距是合并的
例子1
而在父元素加display：inline-block；这时候就会形成一个新的BFC，边距不会合并。.parent{background: yellow;margin-top:30px; display: inline-block;}.child{background:red;margin:50px; }
例子2
代码1----> 参考
代码2---->参考
代码3---->参考
代码4---->参考
