Div+CSS布局常见问题

1.父元素不设置高度，子元素应用float属性，会造成父元素高度坍塌的问题,不能实现高度自适应

分析：浮动float属性会使得元素脱离当前HTML文档流，那么会使得：当前HTML文档会当作设置float属性的元素不存在一样。那么，由于这5个子元素都设置了float，所以可以看作父元素#container内根本没有内容，div在没内容的时候表现正好是高度=0.

解决办法：

a.设置父元素float

例如：

#container {

background-color: #f1f1f1;

width: 80%;
margin: 20px auto;
float: right;
}  这样，父元素也是脱离当前文档流，子元素和父元素一起脱离，并且子元素仍在父元素内，父元素内容不空了，所以高度会适应子元素高度。

此方法有个缺陷是，父元素的宽度需要设置。

b.在最后一个设置浮动的子元素后加一个空div  ，并且让这个div清除浮动。ps:在元素遍历的时候会出现问题

c.父元素设置overflow:hidden;zoom:1;

2.多个div嵌套时，子Div的margin-top不起作用

原因：盒子没有获得 haslayout  造成 margin-top无效
解决办法：

1、在父层div加上：overflow:hidden；

2、把margin-top外边距改成padding-top内边距 ；

3、父元素产生边距重叠的边有不为 0 的 padding 或宽度不为 0 且 style 不为 none 的 border。

    父层div加： padding-top: 1px;

4、让父元素生成一个 block formating context，以下属性可以实现
    * float: left/right
    * position: absolute
    * display: inline-block/table-cell(或其他 table 类型)
    * overflow: hidden/auto
   父层div加：position: absolute;