围住浮动元素的三种方法

最新推荐文章于 2018-02-12 15:35:42 发布

hoho_12

最新推荐文章于 2018-02-12 15:35:42 发布

阅读量358

点赞数

分类专栏：网页设计与制作文章标签： css

本文链接：https://blog.csdn.net/hoho_12/article/details/51000975

版权

网页设计与制作专栏收录该内容

13 篇文章 1 订阅

订阅专栏

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;
}