CSS补充
文档流（定位流，普通流，浮动流）
1、普通流定位 static（默认方式）
普通流定位，又称为文档流定位，是页面元素的默认定位方式 页面中的块级元素：按照从上到下的方式逐个排列 页面中的行内元素：按照从左到右的方式逐个排列 但是如何让多个块级元素在一行内显示? 这里就引出了浮动定位
2、浮动定位 float
float属性 取值为 left/right
脱离文档流
3、相对定位 relative
元素会相对于它原来的位置偏移某个距离，改变元素位置后，元素原本的空间依然会被保留 语法 属性：position 取值：relative 配合着 偏移属性(top/right/bottom/left)实现位置的改变
4、绝对定位 absolute
如果元素被设置为绝对定位的话，将具备以下几个特征 1、脱离文档流-不占据页面空间 2、通过偏移属性固定元素位置 3、相对于 最近的已定位的祖先元素实现位置固定 4、如果没有已定位祖先元素，那么就相对于最初的包含块(body,html)去实现位置的固定 语法 属性：position 取值：absolute 配合着 偏移属性(top/right/bottom/left)实现位置的固定
5、固定定位 fixed
将元素固定在页面的某个位置处，不会随着滚动条而发生位置移动 语法 属性：position 取值：fixed 配合着 偏移属性(top/right/bottom/left)实现位置的固定
高度塌陷问题
在文档流中，父元素的大小会被子元素撑开。
<style type="text/css">
.a{
border: 5px solid blue;
}
.b{
width: 200px;
height: 200px;
background-color: pink;
}
</style>
<body>
<div class="a">
<div class="b"></div>
</div>
</body>如图：
如果给子元素设置浮动，就会脱离文档流，导致高度塌陷。
因此下面的元素也会随之上移。
解决高度塌陷问题
- 元素浮动
- 设置父元素固定高度
- 触发BFC
BFC 定义
BFC(Block formatting context)直译为”块级格式化上下文”。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。通俗一点讲，可以把 BFC 理解为一个封闭的大箱子，容器里面的子元素不会影响到外面的元素，反之也如此。
当元素出发BFC后会具有如下特点：
开启BFC后，元素不会被浮动元素覆盖。
元素垂直外边距不会传递给父元素。
<style type="text/css">
.cube{
width: 100px;
height:100px;
background-color: black;
margin: 100px;
}
</style>
<body>
<div class="cube"></div>
<div class="cube"></div>
</body>margin理应有200px，实际上只有100px。
块的上外边距margin-top和下外边距margin-bottom会合并为单个边距，大小为单个边距的最大值
<style type="text/css">
.cube{
width: 100px;
height:100px;
background-color: black;
margin: 100px;
}
.container{
overflow: hidden;
}
</style>
<body>
<div class="container">
<div class="cube"></div></div>
<div class="cube"></div>
用overflow：hidden出发BFC即可解决。
开启BFC后，元素可以包含浮动的子元素
如何触发BFC
- 设置元素浮动：使用这种方式开启，虽然可以撑开父元素，但是会导致父元素的宽度丢失，而且使用这种方式也会导致下边的元素上移，不能解决问题
- 设置元素绝对定位
- 设置元素为inline-block：可以解决问题，但是会导致宽度丢失，不推荐使用这种方式
- 将元素的overflow设置为一个非visible的值
- display:flex;display:flow-root;
推荐方式：将overflow设置为hidden是副作用最小的开启BFC的方式。 display:flow-root;副作用较小，但是不兼容IE，看情况使用。
最好的解决高度塌陷clearfix
.clearfix::before,.clearfix::after{
content:'';
display:table;
clear:both;
}此方法既能解决高度塌陷，又能解决子元素的margin传递给父元素的问题。