浮动元素有什么特征？对父容器、其他浮动元素、普通元素、文字分别有什么影响?
浮动元素脱离文档流，当一个元素设置成浮动之后，不管是块级元素还是行内元素都可以设置宽高，如果没有设置width，那么将自动收缩为文字的宽度。
对父容器：元素浮动之后如果父容器不设置高度，那么父容器的高度会塌陷。
对其他浮动元素：会跟这个浮动元素一起浮动，如果空间够的话，会贴着这个浮动元素，如果空间不够就往下移，直到碰到另一个元素或者文档的边。
对普通元素：浮动元素脱离文档流，普通的元素会移动到之前浮动元素所占的位置，浮动元素会把普通元素盖住。
对文字：元素浮动之后文字会围绕在浮动元素的周围，形成字围效果。
清除浮动指什么? 如何清除浮动? 两种以上方法
1.给浮动的元素的祖先元素加高度。加了高度的祖先元素，就可以关住浮动元素了，只要浮动在一个有高度的盒子中，那么这个浮动就不会影响后面的浮动元素。所以就是清除浮动带来的影响了。
2.clear:both;（但这种方法有一个非常大的、致命的问题，margin失效了。）
3.在浮动元素的父元素底部加个空标签，标签设置成clear:both.
4.BFC清理浮动，BFC不会重叠浮动元素，并且可以包含浮动。
我们可以利用BFC可以包含浮动的特性来清除浮动，只要父容器形成BFC就可以包含浮动，形成BFC的方法：
float为left或者right；
display为table-cell|table-caption|inline-block|flex
overflow为hidden|scroll|auto
position为absolute|fixed
5.使用伪类元素css：after
.clearfix{
*zoom:1;
}
.clearfix:after{
content:" ";
display:block;
clear:both;
}
有几种定位方式，分别是如何实现定位的，参考点是什么，使用场景是什么？
1，static(默认)
当你没有为一个元素指定定位方式时，默认为static，也就是按照文档的流式定位，将元素放到一个合适的地方。忽略top,left,right,bottom,和z-index的声明。
2.position:relative;相对定位
相对定位，就是微调元素位置的。让元素相对自己原来的位置，进行位置调整。相对定位的元素不脱离文档流，之前占用的位置依然空着，相对定位有坑，所以一般不用于做“压盖”效果。页面中，效果极小。就两个作用：
- 微调元素
- 做绝对定位的参考
Paste_Image.png
3.position: absolute绝对定位。
绝对定位的盒子，是脱离标准文档流的，绝对定位之后，标签就不区分所谓的行内元素、块级元素了，不需要display:block;就可以设置宽、高了
绝对定位的元素以最近的已经定位的祖先元素的为参考点，如果不设top,和left,相对祖先元素的padding 定位。设了top,left等值绝对定位会沿着父容器的内边框做定位。
Paste_Image.png
不一定是相对定位，任何定位，都可以作为参考点
<div> → 绝对定位
<p></p> → 绝对定位，将以div作为参考点。因为父亲定位了。
</div>
子绝父绝、子绝父相、子绝父固，都是可以给儿子定位的。但是，工程上子绝、父绝，没有一个盒子在标准流里面了，所以页面就不稳固，没有任何实战用途。工程上，“子绝父相”有意义，父亲没有脱标，儿子脱标在父亲的范围里面移动，如果父亲和祖先都没有定位，
<div class=”box1”> → 绝对定位
<div class=”box2”> → 相对定位
<div class=”box3”> → 没有定位
<p></p> → 绝对定位，以box2为参考定位。
</div>
</div>
</div>
如果没有父级元素可以参照定位时，
绝对定位的参考点，如果用top描述，那么定位参考点就是页面的左上角，而不是浏览器的左上角：
Paste_Image.png
如果用bottom描述，那么就是浏览器首屏窗口尺寸，对应的页面的左下角：
Paste_Image.png
4.position：fixed固定定位
固定定位，就是相对浏览器窗口定位。页面如何滚动，这个盒子显示的位置不变。固定定位脱离文档流！
当固定导航栏的时候就可以使用固定定位。
z-index 有什么作用? 如何使用?
z-index值表示谁压着谁。数值大的压盖住数值小的。
● 只有定位了的元素，才能有z-index值。也就是说，不管相对定位、绝对定位、固定定位，都可以使用z-index值。而浮动的东西不能用。
● z-index值没有单位，就是一个正整数。默认的z-index值是0。
● 如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面能压住别人。定位了的元素，永远能够压住没有定位的元素。
● 从父现象：父亲的z-index小了，儿子的z-index再大也没用。
Paste_Image.png
position:relative和负margin都可以使元素位置发生偏移?二者有什么区别
两者都可以使元素位置发生偏移。
position：relative偏移之后，原来占据的空间还是占据，旁边的元素也不会移动，就相当于壳还在，只是影子到处飘。
负margin偏移之后会影响周围普通元素的位置。
BFC 是什么？如何生成 BFC？BFC 有什么作用？举例说明
BFC英语是Block fomatting context，它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用，创建了 BFC的元素就是一个独立的盒子。
如何生成BFC
float 为left|right
overflow 除了visible 以外的值（hidden，auto，scroll ）
display ：table-cell|table-caption|inline-block| flex,|inline-flex
position值为absolute|fixed
fieldset元素
BFC作用
1.BFC可以阻止垂直外边距折叠。
要解决垂直外边距的折叠时，只要让它们不在同一个BFC就好了，对于相邻的两个元素意义不大，对于嵌套元素来说，只要让父元素设为BFC就可以防止内部元素与父元素外边距重叠了。
2.BFC不会折叠浮动元素。
3.BFC可以包含浮动元素。利用这个特性，把父元素设置成BFC就可以清除浮动了。
在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例
1.相邻的兄弟姐妹元素
毗邻的两个兄弟元素之间的外边距会塌陷
Paste_Image.png
2.父子元素之间
Paste_Image.png
3.空元素
Paste_Image.png
4.以上三种的混合
Paste_Image.png
避免外边距叠加，只要破坏它的 4 个必要条件（2个或多个、毗邻、垂直方向、普通流）中的一个即可。
不让相邻元素外边距合并只要把它们设置 float 或 inline-block 或 absolute即可。
父子外边距合并范例：
两个都设置了外边距
Paste_Image.png
结果：
里面元素的外边距并不起作用。
Paste_Image.png
整个嵌套元素的外边距是30px,因为外边距合并会合成边距比较大的那一个，所以是父亲的外边距30px.
Paste_Image.png
总结：
1.浮动元素和其他任何元素之间不发生外边距叠加 (包括和它的子元素)
2.创建了 BFC 的元素不会和它的子元素发生外边距叠加
3.绝对定位元素和其他任何元素之间不发生外边距叠加(包括和它的子元素).
4.inline-block 元素和其他任何元素之间不发生外边距叠加 (包括和它的子元素).
通俗的说：
为父元素设置 BFC 或 padding 或 border
兄弟元素间设置 float 或 inline-block 或 absolute
写结构的时候最好用一个方向，都是margin- top 或者都是margin- bottom
网友评论