标签：
1.div块如果不设置宽高的话，他根本显示不出来，只有有内容时会把他给撑起来。
2.我用一个高为201的图片将其撑开的话，他并不是201，在chrome里面是204.在火狐206
但是我用div块吧他撑开的话，他就刚好是100，就是100。
3，如果上一个元素有30px的下边距，而他下面的元素有60px的上边距，这样的话会产生边距合并。他们
之间的边距只有60px，不是90px。
4.旁边的那个滚动条有17px。发现自从那个滚动条出来之后，body的宽度就少了17px。我的div没有设置
宽度，是由图片撑开的，他的宽度也随着滚动条的出现减少了17px。当我把div的宽度设置了一个特定的
宽度时，他不会随着滚动条的出现和没有而改变width.
5.当我把div的宽度设为了1400px的时候，他会出现横向的滚动条，但是此时看body的大小，他仍然是1333
366,外边距还是有8px。本来浏览器的宽是1366，这个1333就是减去了两边的边距16和滚动条的距离17px
6.1400px超出了body，虽然给他设置了 右边距，但是他并没有显示出来。他超出的部分也是用1400-1333+30-8。在调试的时候会出现侧边的滚动条，他是紧挨着div的，在没有调试的时候，他也是紧挨着div的，只是他的整体都缩短了17px。
7.包含图片的div我没有设置宽高，然后我让里面的图片浮动，会发现父元素的高度塌陷了。下面的div都补上来了。如果我给他设置了宽度还是不行。如果我给他设置了大于图片的宽高，则可以把下面的div给挤下去，如果设置的高度小于图片，则会在图片底下，下面的div也会顺势补上来。也会在图片底下。但是图片虽然是脱离了文档流，但是他还是再包含他的div的左上角，也就是像w3school里面写的一样，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
8.清除浮动： 在包含这个浮动元素div块的下面的div块给他设置overflow：hidden，发现他确实从图片里面跑出来了，但是他的左边距已经不是60px了，上边距还是60px。他从图片底下像右平移出来了。
如果是吧他再加上一个width： 100%；这样就是整体的向下平移出来了。还是保持了与body的左边距的60px，但是与他上面的那个div就不是60px了。如果给他的宽度不是设置的100%;而是一个具体的数值，那么他还是从他底下向右平移出来。如果把它的宽度设置的更宽一点，在他的右边放不下则会跑到他的下面来。用clear也可以实现。
为元素设置clear或者设置width;100%(或固定宽度）+overflow：hidden；这两种是对受到浮动影响的元素来设定。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> #div1 { margin: 30px; background: red; width: 300px; height: 100px; } img { float: left; } #div2 { margin: 60px; background: yellow; overflow: hidden; } #div3 { width:200px; height: 100px; background: red; } </style> </head> <body> <div id="div1"> <img src="082211207.jpg"/> </div> <div id="div2"> <div id="div3"></div> </div> </body> </html>
标签：
原文地址：http://www.cnblogs.com/zhuni/p/4733740.html
