css笔记：清除子元素对父元素的浮动效果的三种方法

最新推荐文章于 2024-04-16 18:00:00 发布

YaoDeBiAn

最新推荐文章于 2024-04-16 18:00:00 发布

阅读量7.5k

点赞数 1

分类专栏： html css笔记文章标签： html清除浮动

本文链接：https://blog.csdn.net/YaoDeBiAn/article/details/78002147

版权

css笔记同时被 2 个专栏收录

21 篇文章 0 订阅

订阅专栏

html

17 篇文章 0 订阅

订阅专栏

对于浮动元素，我们知道如果父元素不设置height，而子元素全部设置为浮动，父元素不会被撑开(也就是父元素为一条直线，height为0)，我们看到的就是一条线在所有子元素上面。

例如：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>clear_float</title>
	<style>
		#father{
			border:1px solid #000;
			background:#ccc;
		}
		.child{
			width:100px;
			height:100px;
			background:red;
			float:left;
			margin-top:10px;
			margin-left:10px;
		}
	</style>
</head>
<body>
	<div id="father">
		<div class="child">child1</div>
		<div class="child">child2</div>
		<div class="child">child3</div>
	</div>
</body>
</html>

结果截图如下：
这里写图片描述

这是由于浮动元素脱离标准流而存在，对于标准流与浮动元素就是实物与虚物之间的关系，如何清除浮动子元素对父元素的影响，有三种方法。
一．使用空标记清除浮动
以上面的例子为例，我们在浮动元素之后添加一个空标记(没有内容的标签)，并对该标记设置“clear:both”，即可清除上例中子元素对父元素的影响。
例如：
上述id为father的div标签添加一个

	<div id="father">
		<div class="child">child1</div>
		<div class="child">child2</div>
		<div class="child">child3</div>
		<div class="null"></div>
	</div>

然后style标签中添加一个“null”类的样式：

	<style>
		#father{
			border:1px solid #000;
			background:#ccc;
		}
		.child{
			width:100px;
			height:100px;
			background:red;
			float:left;
			margin-top:10px;
			margin-left:10px;
		}
		.null{
			clear:both;
		}
	</style>

结果截图如下：
这里写图片描述
注意：上述方法虽然可以清除浮动效果，但是却增加了毫无意义的元素节点。
二．使用overflow属性清除浮动
对父元素应用“overflow:hidden”也可以消除子元素对父元素的影响。
例如针对上述例子：

#father{
			border:1px solid #000;
			background:#ccc;
			overflow:hidden;
		}

同样能够实现方法一中的效果。
三．使用after伪对象清除浮动
我们可以通过在上述的father后面添加一个内容来消除上述影响。
注：只需设置属性’content’值为空即可。

例如：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>clear_float</title>
	<style>
		#father{
			border:1px solid #000;
			background:#ccc;
		}
		#father:after{
			content:'';
			display: block;
			clear: both;
		}
		.child{
			width:100px;
			height:100px;
			background:red;
			float:left;
			margin-top:10px;
			margin-left:10px;
		}
	</style>
</head>
<body>
	<div id="father">
		<div class="child">child1</div>
		<div class="child">child2</div>
		<div class="child">child3</div>
	</div>
</body>
</html>

效果如上述其他方法，要注意的是，ie678其默认的内外边距可能不同，故显示的位置可能不同。

YaoDeBiAn

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
css笔记：清除子元素对父元素的浮动效果的三种方法

清除子元素对父元素的浮动效果的三种方法对于浮动元素，我们知道如果父元素不设置height，而子元素全部设置为浮动，父元素不会被撑开(也就是父元素为一条直线，height为0)，我们看到的就是一条线在所有子元素上面。例如：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>clear_float</
复制链接

扫一扫