浮动

浮动模型也是一种可视化模型，浮动的框可以左右移动（根据float属性值而定）
直到它的外边缘碰到包含框或者另一个浮动元素的框的边缘，浮动元素不在文档
的普通流中，文档普通流中的元素表现的就像浮动元素不存在一样

1.png 2.png 3.png 4.png 5.png 6.png 7.png 8.png 1.png 2.png

http://js.jirengu.com/mehepusege/1/edit?html,css,output
http://js.jirengu.com/nujoloqahu/1/edit
http://js.jirengu.com/suwazefudu/1/edit
http://js.jirengu.com/mehepusege/1/edit?html,css,output
http://js.jirengu.com/jerelamezo/1/edit
http://js.jirengu.com/seforijuge/1/edit

清理浮动
解决浮动父容器高度塌陷问题

3.png 4.png 5.png

absolute 
fixed 
float 
inline-block 
table-cell
overflow: auto hidden scroll 
这些会新建块级格式化上下文

6.png

http://js.jirengu.com/poyijuqala/1/edit
http://js.jirengu.com/kagolekeso/1/edit
http://js.jirengu.com/wukamatama/1/edit

7.png 8.png 9.png 10.png 11.png 12.png 13.png 1.png 2.png 3.png 4.png 5.png

http://js.jirengu.com/jaquverane/1/edit
http://js.jirengu.com/mipofuraci/1/edit
http://js.jirengu.com/xosumayagi/1/edit

6.png

http://js.jirengu.com/hayubabobe/1/edit

7.png

http://js.jirengu.com/japaroviho/1/edit?html,css,output

<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>

.box1{
  width: 50px;
  height: 50px;
  border: 1px solid;
}
.box2{
  width: 50px;
  height: 50px;
  border: 1px solid red;
}
.box3{
  width: 50px;
  height: 50px;
  border: 1px solid red;
}
.box2{
/* position: relative
   top: 40px
*/
margin-top: -40px;
}

行框

浮动会让元素脱离普通流，如果浮动的元素后面
有一个文档流中元素，那么这个元素的框会表现
的像浮动元素不存在，但是框的文本内容会受到
浮动元素的影响，会移动以留出空间。用术语说
就是浮动元素旁边的行框被缩短，从而给浮动元素流出空间，因而行框围绕浮动框

题目1：浮动元素有什么特征？对父容器、其他浮动元素、普通元素、文字分别有什么影响?

题目2：清除浮动指什么? 如何清除浮动? 两种以上方法

题目3：有几种定位方式，分别是如何实现定位的，参考点是什么，使用场景是什么？

题目4：z-index 有什么作用? 如何使用?

题目5：position:relative和负margin都可以使元素位置发生偏移?二者有什么区别

题目6：BFC 是什么？如何生成 BFC？BFC 有什么作用？举例说明

题目7：在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例