html div高度为0,html中父div高度为0的原因

问题：

在chrome中看到父div高度为0，但里面明明有内容。

原因：

简单的讲原因就是子元素如果设了float属性，这些子元素就脱离了父div容器的控制，所以父容器认为里面没内容，高度自然变成了0.

解决办法：

1、在子div最后添加了个专门用户清除浮动的div，如

2、在父div里添加样式：

overflow:hidden;

3、不要用浮动，子元素使用display:inline-table或者display:inline-block

DEMO:

.main{padding:10px;font-size:24px;width:480px;}

.header{margin-bottom: 10px;overflow: hidden;}

.header .left{float:left;width:50%;}

.header .right{float:left;width:50%;}

.list{clear:both;overflow: hidden;}

.list .col1{float:left;width:10px;background-color: #0000FF;}

.list .col2{float:left;width:24%;background-color: #26C1FE;}

.list .col3{float:left;width:24%;background-color: #E58484;}

.list .col4{float:left;background-color: #0000FF;}

2015-10-22

+12.00

avatar

nickname

status:

status:

status:

status: