html清除浮动的方法

最新推荐文章于 2021-10-02 12:00:50 发布

Teng＿

最新推荐文章于 2021-10-02 12:00:50 发布

阅读量251

点赞数 1

分类专栏：萌新

本文链接：https://blog.csdn.net/qq_41268447/article/details/99105161

版权

萌新专栏收录该内容

4 篇文章 0 订阅

订阅专栏

当元素设置为浮动时，不会占据文档的高度，从而使它父元素的高度为 0 ，后面的元素会被浮动元素覆盖
html和css如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#parentDiv{
				border: 1px solid black;
			}
			div span{
				width: 100px;
				height: 100px;
				border: 1px solid red;
				float: left;
			}
		</style>
	</head>
	<body>
		<div id="parentDiv" >
			<span>
				span1
			</span>
			<span>
				span2
			</span>
		</div>
		<div>后面的元素</div>
	</body>
</html>

效果如下图：
在这里插入图片描述
本该在span1和span2下一行出现的后面的元素却在同一行出现了，所以清楚浮动的方法如下:

给父类设置高度

#parentDiv{
				border: 1px solid black;
				height: 100px;
			}

效果如下：
在这里插入图片描述
当然这是最简单的一个办法，但是也有它的局限行，这个方法你必须由手动来输入精确的高度,若果输入的高度比他父类的高度还要低的话就会出现布局问题了,如下图
在这里插入图片描述=

在浮动结尾div后增加一个空白div 并设置样式 clear：both

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#parentDiv{
				border: 1px solid black;
			}
			div span{
				width: 100px;
				height: 100px;
				border: 1px solid red;
				float: left;
			}
			#clear{
				clear: both;
			}
		</style>
	</head>
	<body>
		<div id="parentDiv" >
			<span>
				span1
			</span>
			<span>
				span2
			</span>
		</div>
		<div id="clear"></div>
		<!--这里插入并设置样式-->
		<div>后面的元素</div>
	</body>
</html>

效果如下：
在这里插入图片描述
这样写也很简单，但是如果在没一个浮动后面增加一个空白div的话会增加冗余，不利于优化。

增加 overflow: hidden /auto:

#parentDiv{
				border: 1px solid black;
				overflow: auto;
			}

如下图
在这里插入图片描述
这个写起来也很简单，但是不适合与position 配合使用，多出的部分会被隐藏掉。

增加伪类样式 :

			.parentDiv:after{
				display: block;
				clear: both;
				content: "";
				visibility: hidden;
				height: 0;
			}
			.parentDiv{
				zoom: 1;
			}

如下图
在这里插入图片描述
这都是我学习时的笔记和各位分享分享

Teng＿

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html清除浮动的方法

当元素设置为浮动时，不会占据文档的高度，从而使它父元素的高度为 0 ，后面的元素会被浮动元素覆盖html和css如下：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css...
复制链接

扫一扫