HTML div即父容器不根据内容自适应高度的原因及解决方法

最新推荐文章于 2023-07-29 13:07:10 发布

转载最新推荐文章于 2023-07-29 13:07:10 发布 · 1.7k 阅读

HTML+CSS 专栏收录该内容

15 篇文章

订阅专栏

本文介绍了在CSS布局中解决父容器高度塌陷问题的几种常见方法，包括添加额外标签、使用overflow属性、伪元素等，并分析了各自的优缺点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天在写页面的时候遇到一个问题：父容器不根据内容自适应高度。于是了解了一下其原因及相关的解决办法。

（1）原因：

浮动：浮动的框可以左右移动，直至它的外边缘遇到包含框或者另一个浮动框的边缘。浮动框不属于文档中的普通流，当一个元素浮动之后，不会影响到块级框的布局而只会影响内联框（通常是文本）的排列，文档中的普通流就会表现得和浮动框不存在一样，当浮动框高度超出包含框的时候，也就会出现包含框不会自动伸高来闭合浮动元素（“高度塌陷”现象）。顾名思义，就是漂浮于普通流之上，像浮云一样，但是只能左右浮动。

正是因为浮动的这种特性，导致本属于普通流中的元素浮动之后，包含框内部由于不存在其他普通流元素了，也就表现出高度为0（高度塌陷）。在实际布局中，往往这并不是我们所希望的，所以需要闭合浮动元素，使其包含框表现出正常的高度。

（2）解决办法：而相应的解决办法就是“清除/闭合浮动”，方法主要有以下4种：

a)添加额外标签

 <div class="wrap" id="float1">
         <h2>1）添加额外标签</h2>
         <div class="main left">.main{float:left;}</div>
         <div class="side left">.side{float:right;}</div>
         <div style="clear:both;"></div>
     </div>
     <div class="footer">.footer</div>

优点：通俗易懂，容易掌握

缺点：可以想象通过此方法，会添加多少无意义的空标签，有违结构与表现的分离，在后期维护中将是噩梦。

b)父元素设置 overflow：hidden

<div class="wrap" id="float3" style="overflow:hidden; *zoom:1;">
        <h2>3)父元素设置 overflow </h2>
        <div class="main left">.main{float:left;}</div>
        <div class="side left">.side{float:right;}</div>
    </div>
    <div class="footer">.footer</div>

优点：不存在结构和语义化问题，代码量极少；

缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素；

c)使用:after 伪元素

需要注意的是 :after是伪元素（Pseudo-Element），不是伪类（某些CSS手册里面称之为“伪对象”），很多闭合浮动大全之类的文章都称之为伪类，不过csser要严谨一点，这是一种态度。

由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。

<style>
     .clearfix:after {content:"."; display:block; height:0; visibility:hidden; clear:both; }
     .clearfix { *zoom:1; }
    </style>

优点：结构和语义化完全正确，代码量居中；

缺点：复用方式不当会造成代码量增加，因此建议创建一个公共类名来用于闭合浮动；

（3）总结：

日志里面并没有详细说明产生这个问题的原理，只是简单列举了最常见的三种解决办法及其优劣，在这里推荐一篇博文，个人认为讲解的更加详细：

http://www.iyunlu.com/view/css-xhtml/55.html