浮动定位与BFC边距合并
浮动元素有什么特征？对父容器、其他浮动元素、普通元素、文字分别有什么影响?
- 浮动模型也是一种可视化格式模型，浮动的框可以左右移动（根据float属性值而定），直到它的外边缘碰到包含框或者另一个浮动元素的框的边缘。
- 浮动元素不在文档的普通流中，文档的普通流中的元素表现的就像浮动元素不存在一样.
- 如果包含块儿太窄无法容纳水平排列的三个浮动元素,那么其它浮动块儿向下移动,直到有足够的空间,如果浮动元素的高度不同,那么向下移动的时候可能被卡住
- 浮动元素后面的内联元素会向此浮动元素的外边距靠齐（浮动元素旁边的行框被缩短）
各种影响
- 对父容器的影响
元素浮动之后脱离正常的文档流，会造成其父元素高度塌陷，如果全部子元素为浮动元素父元素高度会变成0 - 对其他浮动元素的影响
同一个方向：浮动元素会依次排列，排列不下时会切换到另一行，高度不同时会卡住
不同方向时：互不影响，位于同一高度，当空间不足时会被挤下 - 对其他普通元素的影响
对块框来说浮动元素就像不存在一样，不影响布局 - 对文字的影响
浮动框旁边的行框被缩短，从而给浮动框留出空间，行框围绕浮动框
清除浮动指什么? 如何清除浮动? 两种以上方法
浮动会导致父容器塌陷问题，清除浮动就是解决父容器塌陷问题
方法1：添加一个空的div，<div style="clear:both;"></div>
方法2：BFC可以包含浮动,使父容器形成BFC,可以清除浮动，例如添加overflow:hidden;,形成BFC的方式如下float为 left|right
overflow为 hidden|auto|scroll
display为 table-cell|table-caption|inline-block
position为 absolute|fixed
通用清理方案
/*方法1*/
.clearfix{
*zoom:1;
}
.clearfix:after{
content:"";
display:block;
clear:left;
}
/*方法2*/
.clearfix{
*zoom:1;
}
.clearfix:after{
content:"";
display:table;
clear:both;
}
有几种定位方式，分别是如何实现定位的，参考点是什么，使用场景是什么？
定位方式有三种 分别是 普通定位 相对定位 绝对定位
与定位相关的属性是position属性,其值有
普通流与相对定位
- 普通流是默认定位方式，在普通流中元素框的位置由元素在html中的位置决定，元素position属性为static或继承来的static时就会按照普通流定位，这也是我们最常见的方式
- 相对定位比较简单，对应position属性的relative值，如果对一个元素进行相对定位，它将出现在他所在的位置上，然后可以通过设置垂直或水平位置，让这个元素相对于它自己移动，在使用相对定位时，无论元素是否移动，元素在文档流中占据原来空间，只是表现出来的位置会改变
固定定位与绝对定位
- 相对定位可以看作特殊的普通流定位，元素位置是相对于它在普通流中位置发生变化，而绝对定位使元素的位置与文档流无关，也不占据文档流空间，普通流中的元素布局就像绝对定位元素不存在一样
- 绝对定位的元素的位置是相对于距离最近的非static祖先元素位置决定的。如果元素没有已定位的祖先元素，那么他的位置就相对于初始包含块html来定位demo。
- 因为绝对定位与文档流无关，所以绝对定位的元素可以覆盖页面上的其他元素，可以通过z-index属性控制叠放顺序，z-index越高，元素位置越靠上。
- fixed固定定位，固定定位是绝对定位的一种，固定定位的元素也不包含在普通文档流中，差异是固定元素的包含块儿是视口（viewport）
z-index 有什么作用? 如何使用?
z-index可以调整显示层级，因为绝对定位与文档流无关，所以绝对定位的元素可以覆盖页面上的其他元素，可以通过z-index属性控制叠放顺序，z-index越高，元素位置越靠上。
position:relative和负margin都可以使元素位置发生偏移?二者有什么区别
position:relative文档流中真实的位置没有改变，只是显示位置偏移，不会对其他元素造成影响
margin文档流中真实地位置改变了,会对后续元素造成影响
BFC 是什么？如何生成 BFC？BFC 有什么作用？举例说明
BFC全称是* Block Formatting Context,直译为块级格式化上下文*。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。
生成BFC的方式
- 根元素
- float属性不为none
- position为absolute或fixed
- display为inline-block, table-cell, table-caption, flex, inline-flex
- overflow不为visible
BFC的作用
- 自适应栏布局
- 清除内部浮动
- 防止垂直 margin 重叠
除了下面粒子中用overFolow以外用其他的属性形成BFC也能达到相同效果
- 自适应栏布局
<style>
body {
width: 300px;
position: relative;
}
.aside {
width: 100px;
height: 150px;
float: left;
background: #f66;
}
.main {
height: 200px;
background: #fcc;
}
</style>
<body>
<div class="aside"></div>
<div class="main"></div>
</body>
a1.png
添加
.main {
overflow: hidden;
}
a2.png
- 清除内部浮动
<style>
.par {
border: 5px solid #fcc;
width: 300px;
}
.child {
border: 5px solid #f66;
width:100px;
height: 100px;
float: left;
}
</style>
<body>
<div class="par">
<div class="child"></div>
<div class="child"></div>
</div>
</body>
添加
.par {
overflow: hidden;
}
>
>>- 防止边距合并
>>```
<style>
p {
color: #f55;
background: #fcc;
width: 200px;
line-height: 100px;
text-align:center;
margin: 100px;
}
</style>
<body>
<p>Haha</p>
<p>Hehe</p>
</body
a5.png
我们可以在p外面包裹一层容器，并触发该容器生成一个BFC。那么两个P便不属于同一个BFC，就不会发生margin重叠了。
<style>
.wrap {
overflow: hidden;
}
p {
color: #f55;
background: #fcc;
width: 200px;
line-height: 100px;
text-align:center;
margin: 100px;
}
</style>
<body>
<p>Haha</p>
<div class="wrap">
<p>Hehe</p>
</div>
</body>
a6.png
在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例
合并场景
- 普通文档流中两个或多个毗邻（父子元素或兄弟元素）的块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。
- 父子外边距合并
- 空元素外边距合并
合并规则
- 当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
- 边距为负值时娶绝对值比较大的
- 当有正有负的时候，先取出负 margin 中绝对值中最大的，然后，和正 margin 值中最大的 margin 相加。
- 所有毗邻的margin要一起参与运算，不能分步进行。
取消外边距合并
- 形成一个BFC可以取消外边距合并
父子外边距合并的例子(父节点没有border的情况下才会出现)
body{
background-color:pink;
}
*{
margin:0px;
padding: 0px;
}
.parent{
background-color:green;
height:100px;
/* overflow:hidden; */
}
.child{
height:40px;
margin-top:20px;
background-color:blue;
}
</style>
<body>
<div class="parent">
<div class="child">
</div>
</div>
</body>
w1.png
parent添加
overflow:hidden;后
w2.png
