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>