围住浮动元素的三种方法
<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;

}


阅读更多
个人分类: web css
想对作者说点什么? 我来说一句

android 围住神经猫 源码

2015年02月03日 373KB 下载

没有更多推荐了,返回首页

不良信息举报

围住浮动元素的三种方法

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭