如果不给div定宽高，那么他的子类或子类的子类定宽高的话，那么那个div有宽高吗？

Question

我的ul，li都没有设置宽高，只是子类的子类img和p设置了宽高，为什么ul的height为0呢？
子类没有把他撑起来

比如这个div.content-inner和ul#p-1都没有设宽高，
但是页面元素审查时却显示宽高，是怎么回事？和后代元素设宽高有关系吗？
为什么我这样做的话div和ul还是没有显示宽高呢？

Answer 1

目测是因为li用了float所以ul撑不起高度来

好像是我最先回答这个的……结果被题主无视了，题主没有给下面li的样式，所以我开始也不能确定，看你追问别人，那就果然是float的问题没跑了

解决方法3种：父标签添加overflow:auto/浮动标签最后添加一个clear:both的空元素/父标签用:after伪类定义一个clear:both的隐藏区块

Answer 2

water_junket 的解决办法比我的多，第一种和第三种比我的简单。

---

我自己的答案：
这个与 float 的定位方式有关系。

float 的定位方式的摘录如下：

How floats are positioned

As mentioned above, when an element is floated it is taken out of the normal flow of the document. It is shifted to the left or right until it touches the edge of it's containing box or another floated element.

原文全文地址在 这里。

翻译：浮动是如何定位的

正如上面所提到的那样，当一个元素浮动的时候，它会被取出在正常的元素流之外（译注：document flow 应该翻译为 文本流，但是 文本 两字在汉语中有 text 的含义，消歧义，翻译为元素流）。它会被向左或向右漂移，直到它贴到容器的边缘或者另外一个浮动元素的边缘。

图片解释如下：
（注意 float 使得 li 脱离了元素流，使得 ul 高度不再被撑起）

---

第二次修改：

---

/* 
*    解决办法 1
*    不修改 a 的样式
*    同时添加多个标签，用来清除 a 的浮动 
 */
<style>
    .clear {
        width:100%;
        height:0;
        line-height:0;
        clear:both;
    }
</style>
<ul>
    <li>
        <a href="#">#</a>
        <div class="clear">   
    </li>
    <li>
        <a href="#">#</a>
        <div class="clear">   
    </li>
    <li>
        <a href="#">#</a>
        <div class="clear">   
    </li>
</ul>

/* 
*    解决办法 2
*    修改 a 的样式，将 float 属性添加在 li 标签上
*    同时添加一个标签，用来清除  li 的浮动
*/
<style>
    li {
        float:left;
    }
    li > a {
        float:none;
    }
    .clear {
        width:100%;
        height:0;
        line-height:0;
        clear:both;
    }
</style>
<ul>
    <li>
        <a href="#">#</a> 
    </li>
    <li>
        <a href="#">#</a>  
    </li>
    <li>
        <a href="#">#</a>  
    </li>
    <div class="clear"></div>
</ul>

你的代码的问题在于 ul,li 都没有高度，而且应该是被 reset 过的；同时，你对 li > a 使用了 float ，所以 a 浮动在 li之上 -> li 高度为 0 -> ul 高度为 0 。

Answer 3

父类会被撑起来

Answer 4

父类的高度为auto，被子类撑起来了，chrome上显示的宽高是浏览器计算后的宽高，所以styles里是不会显示的，可用js的getComputedStyle取得值

Answer 5

div没有在没有设置宽高的情况下都是根据子类的宽度来决定的，也就是被撑起来的。然后你可以在你的调试器里面盒模型一栏里面查看宽和高

Answer 6

父类的宽高相当于是auto，会被子类的空间大小（不是内容大小）给撑开

Answer 7

个人认为得分情况，两种情况：

• 有浮动，那当然就可能没有高度了。
• 没有浮动，父元素会被撑开，height:auto;

解决方法：对父元素添加 .clearfix ( bootstrap 的一个类，你可以去看看)，可以获得高度。