浮动元素的特征
- 元素在浮动后不会独占一行。
- 元素在浮动后会脱离文档流
- 行内元素在浮动后会可以设置宽和高
1.在父元素里，如果子元素浮动，父元素高度为0。
2.对其他的浮动元素会并排在一起。
3.浮动元素会盖住普通元素。
4.文字会感知到浮动元素的存在，会包围浮动元素。
清除浮动元素
- 清除浮动的原因是：是清除浮动带来的不利影响。
- 清除浮动的方法：
1.空标签清除浮动：在父元素里添加没有高度的子标签，然后设置clear:both;
2.after伪类清浮动:父元素:after{content:'';display:block;clear:both;}，父元素{zoom:1;}。
3.利用BFC来清除浮动。
定位方式
- inherit:从父元素继承定位的属性。
- static:默认值，没有定位，定位在正常的文档流。
- relative:相对定位，相对于自身的定位来进行移动。依然占有原有的位子。
- absolute:绝对定位，相对于最近定位的父元素进行定位。不占有原有的位子
- fixed：固定定位。生成绝对定位元素，相对于viewport进行定位。
- sticky：对象在常态时遵循普通流。它就像是relative和fixed的合体，当在屏幕中时按常规流排版，当卷动到屏幕外时则表现如fixed。
z-index 的作用
当元素重叠在一起的时候。可以用z-index来修改重叠的顺序。'
position：relative;和margin的区别:
position:relative;只相对自己原本位置发生偏移，不影响其它普通流中元素的位置。
margin：除了让元素自身发生偏移还影响其它普通流中的元素。
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.外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
(1)兄弟元素外边距合并
d1{
width:100px;
height:100px;
marign:10px;
}
d2{
width:100px;
height:100px;
margin:20px;
}
d1和d2的外边距就是20px
(2)父子元素的外边距合并:如果父子元素之间没有padding和空白内容等时就会发生外边距合并。
.parent{
width: 200px;
height: 100px;
margin-top:10px;
background-color: red;
}
.child{
width: 100px;
height: 100px;
margin-top:30px;
background-color: yellow;
}
(3)
外边距自己和自己合并
如果一个元素没有边框和填充，但有上下外边距，这时它的上下外边距会合并。
网友评论