web排版中外层元素高度无法自己适应内部内容的问题及3种解决方法

来源：互联网发布：解忧杂货店读后感知乎编辑：程序博客网时间：2024/05/16 10:16

问题描述：当内层使用左、右浮动时，如果没有处理，会造成外部的框高度不能自动调整的情况。用div+css 排版久了，总有一天会遇上这个问题，上代码/图：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>web排版中外层div高度不自动随内容扩展问题还原</title><mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1">ul ,li {padding:2px;margin:0px;display: block;font: normal 12px/20px "微软雅黑";}#cc {width: 240px;background: #0C6;}#cc li {list-style: none;width: 48px;height:48px;background:#DFFFEF;border:1px solid #063;float: left;padding:5px;}</style></head><body><ul id="cc"><li> 其实我不是程序员</li><li> 其实我不是程序员</li><li> 其实我不是程序员</li><li> 其实我不是程序员</li><li> 其实我不是程序员</li><li> 其实我不是程序员</li></ul></body></html>

几个浏览器测试得到下边的结论：

多种解决方法

1、比较早期的方法，在最后一个Li的后边加一个有clear:both的物事，sapn,div,p都可以，如

缺点：很明显，多出一个无语意代码，不理想

2、很流行的clearfix,利用的是after这个伪对象，IE8/FireFox/chorme支持（很多伪对像伪类是很好的功能，只可惜目前市场占有还是最高的IE6多不支持）

缺点：Css代码有点多了，不方便记，还用了Hacker

3、用溢出定义overflow:auto来解决，这种方法最简单，还不清楚为什么用的人不多，难道有什么问题？

以上为以往工作过程中遇到的问题解决方法，目前只了解到这三种解决方法。

本文关键字：css,web前端,css bug, 高度自适应,clearfix,