問題：

在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.00avatarnicknamestatus:status:status:status:

修改一行最后一個元素的樣式

$('#ul?li:nth-child(3n)').css('color','red');

總結

以上是生活随笔為你收集整理的html高度为零,html中父div高度为0的原因的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。