10

正常情况，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