围住浮动元素的三种方法

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

fcbarcelona93

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

阅读量280

点赞数

分类专栏： web css

本文链接：https://blog.csdn.net/fcbarcelona93/article/details/52355650

版权

web css 专栏收录该内容

3 篇文章 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;

}

优惠劵

fcbarcelona93

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
围住浮动元素的三种方法

Document section{ border: 1px solid blue; margin: 0 0 10px 0; } p{ margin: 0 auto; } footer{ border: 1px solid red; } img{ float: left; } it's fun to float!
复制链接

扫一扫