margin设置为什么会宿小图片？float后其他div的文字内容怎么变位置了？

Question

开始是这样

我给产品那个div设置：margin：20px后，如下，它上下扩展了20px,而左右却是自己缩小了20px,为什么会缩小

我给产品那个div float后，下面的div也跟着上来了，如下，只是后面div文字内容本来是一个居左一个居中的，为何都跑到可见部分的左和中去了？

Answer 1

body设置了宽度，然后产品是在body里的，产品宽度就是body宽度减去左右padding和border，设置了margin后，产品宽度自然就要变为body宽度减去左右padding和border和margin了。