关闭

围住浮动元素的三种方法

52人阅读 评论(0) 收藏 举报
分类:
<pre name="code" class="html"><!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		section{
			border: 1px solid blue;
			margin: 0 0 10px 0;
		}
		p{
			margin: 0 auto;
		}
		footer{
			border: 1px solid red;
		}
		img{
			float: left;
		}
	</style>
</head>
<body>
	<section>
		<img src="1.jpg" alt="">
		<p>it's fun to float!</p>
	</section>
	<footer>
		abcdefghijklmnopqrstuvwxyz,abcdefghijklmnopqrstuvwxyz.
	</footer>
</body>
</html>




1、为父元素添加overflow:hidden

section{

         overflow:hidden;

}

2、同时浮动父元素

section{

     float:left;

}

3、添加非浮动的清除元素

<section>
		<img src="1.jpg" alt="">
		<p>it's fun to float!</p>
		<div class="clear_me"></div>
</section>

.clear_me{
			clear: left;
		}
或者给section添加clearfix类

.clearfix{

          clear:both;

}


0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:5506次
    • 积分:446
    • 等级:
    • 排名:千里之外
    • 原创:40篇
    • 转载:0篇
    • 译文:0篇
    • 评论:6条
    文章分类