CSS 之清除浮动.clearFix:after

最新推荐文章于 2023-10-21 21:46:54 发布

EthanQ

最新推荐文章于 2023-10-21 21:46:54 发布

阅读量964

点赞数

分类专栏： web前端文章标签： css xhtml float div class border

本文链接：https://blog.csdn.net/ethanq/article/details/7216646

版权

web前端专栏收录该内容

12 篇文章 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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
	#header{
		width:780px;height:80px;background:#069;margin:0 auto;	
	}
	
	#box {
		width:780px; margin:0 auto; border:10px solid #000;border-radius:38px;
	}
	
	#left {
		width:180px;height:300px;background:#f90;float:left;	
	}
	
	#center {
		width:500px;height:400px;background:#63f;float:left;	
	}
	
	#right {
		width:100px;height:300px;background:#c00;float:left;	
	}
	
	#footer {
		width:780px;height:50px;background:#0c0;margin:0 auto;	
	}
	
	/*清除浮动,让box自适应高度，主要box没有设置height 
	.clear {clear:both;}*/
	
	.clearFix:after {
		clear:both;
		display:block;
		visibility:hidden;
		height:0;
		line-height:0;
		content:".";
	}
	.clearFix{
		zoom:1;	/*解决ie6自适应高度问题*/
	}
</style>
</head>

<body>
<div id="header">1</div>
<div id="box" class="clearFix">
    <div id="left">2</div>
    <div id="center">3</div>
    <div id="right">4</div>
	<!--<div class="clear"></div>--清除浮动，撑开box-->
</div>

<div id="footer">5</div>
</body>
</html>