正常情况，div为块级元素
红色块设置为靠右浮动，碰到边框停止
浮动元素脱离普通流。覆盖了绿色
屏幕快照 2017-05-21 下午4.59.07.png
屏幕快照 2017-05-21 下午5.00.37.png
div无法意识到浮动元素的存在，但div中的文本意识到它的存在，会在周围开始排列，如果无法排列，则会从下一行开始排列
1浮动后，box 2没有意识到，直接上去跑到地下，被1给遮盖了，但2的文本内容意识到了1的浮动，于是围绕在1的周围，和3重叠了。
box1浮动后，box2上移到box1的位置，一部分被遮盖，但是其中文字向box1周围浮动
box1和box2都浮动后，包含他们的div 无法感知到任意一个的存在
为了阻止外边距合并，只要让其中一个box属于另一个bfc就行。
两个元素嵌套，ct嵌套了h1的时候，给其中的一个元素设置了margin ，显示会被掩盖，这个时候需要把父元素设置为bfc ,padding,border,overflow设置为
BFC不会重叠浮动元素，可以分栏，通过给围绕的元素设置为bfc
将ct设置为float可以生产bfc块级元素效果
微信截图_20170523132342.png
1.png
微信截图_20170523133218.png
图片发自简书App
当元素相对于父元素绝对定位时，如果父元素本身有padding,则默认情况的absolute是相对于padding进行定位，也就是会去掉padding。如果需要紧挨边框，则需要设置left 和right的值。
不设置宽度，默认情况下是撑开的。当设置position:absolute 或float之后会收缩为一个内容的宽度。因此，需要为box设置一个固定宽度
width:100%为自己的content等于父容器的content宽度的100%。因为本身position:absolute为auto，相当于有padding的偏移，因此需要设置left:0
去掉border正合适
如何让一个box垂直居中于父元素盒子
relative偏移没有脱离文件流，旁边元素仍然以为它占据原来位置
margin-top 偏移，是整体一起偏移，文档流的位置发生偏移
作业代码1
代码1：http://js.jirengu.com/tume/1/edit?html,css,output
代码2：http://js.jirengu.com/yine/1/edit?html,css
代码3:http://js.jirengu.com/xewir/1/edit?html,css,output
代码4:http://js.jirengu.com/ravud/1/edit?html,css,output
浮动元素有什么特征？对父容器、其他浮动元素、普通元素、文字分别有什么影响?
浮动元素是一种可视化格式模型，可以设置为左右浮动，浮动的元素会脱离文件普通流，周围的普通元素会表现得好像它不存在一样，占据它原来的位置，但周围的文字内容会察觉到浮动元素位置的变动，因此会围绕其周围排布。
如果一个父容器的子元素是浮动元素，且父容器没有设置高度，那么父容器会坍塌失去高度。
清除浮动指什么? 如何清除浮动? 两种以上方法
当容器高度设置为auto，且容器内容中有浮动的元素存在，这种情况下，容器的高度不能自动伸缩适应内容的高度，使得内容过场溢出到容器之外，这叫做浮动溢出，因此需要清除浮动处理。
屏幕快照 2017-05-30 下午8.43.14.png
屏幕快照 2017-05-30 下午9.49.26.png
