围住浮动元素的三种方法

原创

hoho_12 2016-03-28 20:36:44 ©著作权

©著作权归作者所有：来自51CTO博客作者hoho_12的原创作品，请联系作者获取转载授权，否则将追究法律责任

demo.html

<!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>无标题文档</title>
<link href="css/main.css" rel="stylesheet" type="text/css"/>
</head>
<section>
	<img src="images/3.jpg">
	<p>IT is fun to float</p>
</section>
<footer>it is a footer hello to see of this view can you </footer>
<body>
</body>
</html>

main.css

/* CSS Document */
section
{
	border:1px solid blue;
	margin:0 0 10px 0;
}
p
{
	margin:0;
}
footer
{
	border:1px solid red;
}
img
{
	float:left;
}

方法一：为父元素添加overflow:hidden

/* CSS Document */
section
{
	border:1px solid blue;
	margin:0 0 10px 0;
	overflow:hidden;
}
p
{
	margin:0;
}
footer
{
	border:1px solid red;
}
img
{
	float:left;
}

方法二：同时浮动父元素

/* CSS Document */
section
{
	border:1px solid blue;
	margin:0 0 10px 0;
/*	overflow:hidden;*/
	float:left;
	width:100%;
}
p
{
	margin:0;
}
footer
{
	border:1px solid red;
	clear:left;
}
img
{
	float:left;
}

方法三：添加非浮动的清除元素

demo.html

<!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>无标题文档</title>
<link href="css/demo3.3.main.css" rel="stylesheet" type="text/css"/>
</head>
<section>
	<img src="images/3.jpg">
	<p>IT is fun to float</p>
	<div class="clear_me"></div>
</section>
<footer>it is a footer hello to see of this view can you </footer>
<body>
</body>
</html>

css

/* CSS Document */
section
{
	border:1px solid blue;
	margin:0 0 10px 0;
	
/*	overflow:hidden;*/
	/*float:left;
	width:100%;*/
}
p
{
	margin:0;
}
footer
{
	border:1px solid red;
	/*clear:left;*/
}
img
{
	float:left;
}
.clear_me
{
	clear:left;
}

方法四

demo.html

<!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>无标题文档</title>
<link href="css/demo3.3.main.css" rel="stylesheet" type="text/css"/>
</head>
<section class="clearfix">
	<img src="images/3.jpg">
	<p>IT is fun to float</p>
	<!--<div class="clear_me"></div>-->
</section>
<footer>it is a footer hello to see of this view can you </footer>
<body>
</body>
</html>

css

/* CSS Document */
section
{
	border:1px solid blue;
	margin:0 0 10px 0;
	
/*	overflow:hidden;*/
	/*float:left;
	width:100%;*/
}
p
{
	margin:0;
}
footer
{
	border:1px solid red;
	/*clear:left;*/
}
img
{
	float:left;
}
/*.clear_me
{
	clear:left;
}*/
.clearfix:after{
	content:".";
	display:block;
	height:0;
	visibility:hidden;
	clear:both;
}