Question

html/css的两个问题，求助，谢谢！关于浮动float。

问题1：

有两个div，父亲和孩子div。问题是在对#div2的margin-top那一句，为什么设置为150px之后不是子div即div2距离父div即div1的上边缘为150px，而变成了整个的父亲div（带着子div）整个的距离浏览器上边缘150px了呢？又不是对div1设置的margin-top。
问题2：

和上边是一个题。加了一个div3。div2设置了浮动，脱离了标准流。又来了个div3，div3是标准流的内容，那么应该如图中橘红色块显示的位置摆放，到这里没什么问题。
为什么div3的那一行文字会摆在div2（设置浮动为left的那个div）的下边呢，这一行文字不是div3的内容嘛，在标准流里面，而div2是非标准流。div2没有影响到div3的定位为什么影响到了div3中文字的定位了呢？

谢谢。还是对float理解不够深刻。求赐教，谢谢！





Answer 1

第一个问题，涉及到外边距折叠的问题。讲起来有点费劲，你需要理解的几点：

1. 在CSS中，两个或以上的块元素（可能是兄弟，也可能不是）之间的相邻外边距可以被合并成一个单独的外边距。

2. 处于同一个块级上下文中的块元素，没有行框、没有间隙、没有内边距和边框隔开它们，这样的元素垂直边缘毗邻，则称之为相邻。

3. 折叠的边距取大的一个。

分析你的问题很明显边距已经折叠了，而且取的是#div2的margin-top，所以当发生边距折叠的时候不一定是兄弟元素，也有可能是包含关系的元素。关于margin建议你网上找《css探索之旅》的博客，大牛有N篇关于margin的文章，相信你看了就明白了。

第二个问题，float不会覆盖元素，其他受影响的元素都会在他后面排列。如果按照你的说法会覆盖的话，应该是用绝对定位，这样会有多层覆盖的效果。关于float建议你看《css权威指南》，里面讲的特别清楚，各种情况都有详细的分析。

希望能帮到你！

追答

谢谢

有问题继续建立

Answer 2

问题一：
你的父div没有设置position:relative;也是相对定位。父div设置为这个后，子div设置为postion:absolute;这样在设置margin属性就相对于其父定位了。默认的margin是相对于浏览器定位。

问题二：
没有明白你的意思。欢迎继续交流。

Answer 3

问题一：你给子元素设定float：left；这样就可以达到你的要求；
问题二：你可以这样理解，其实一个块元素，其实他包含两个部分，一个部分就是background（默认颜色为#fff）以及块元素的内容；你可以这样理解，他们的高度都一样，就是背景理解为画布，画布高度为一定比如5px，而元素内容的文字也有一定高度，比如说也是5px，float之后，整个块元素的高度提高了5px，div2个高度为海拔5px，div3的海拔高度为0；这样div3的内容为什么会被div2撑开就很容易理解了。希望可以帮助你更好的理解float哈

Answer 4

这个是什么编辑器，蛮好看的

追问

【vs2012 】^_^