解决浮动元素父容器高度自适应问题

accphc

于 2014-04-11 16:53:43 发布

阅读量156

点赞数

分类专栏： CSS 文章标签： xhtml

本文链接：https://blog.csdn.net/accphc/article/details/84548000

版权

CSS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!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> 
<title>clearfix</title> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<meta http-equiv="Content-Language" content="zh-CN" /> 
<style type="text/css"> 
.area{background:#ccc;width:960px;}/*定义父容器背景颜色，以便于观察；定义宽度，使其在IE下高度自适应*/
.clearfix:after{height:0px;visibility:hidden;content:".";clear:both;display:block;}
.fl{float:left;background:#FFDF00;}
</style> 
</head> 
<body> 
<div class="area clearfix">
    <div class="fl">floater</div>
</div>
</body> 
</html>