CSS清除浮动

最新推荐文章于 2021-08-03 19:17:15 发布

淘技术

最新推荐文章于 2021-08-03 19:17:15 发布

阅读量240

点赞数

分类专栏： css 文章标签： html 浮动 css

本文链接：https://blog.csdn.net/m0_37983376/article/details/72910795

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.浮动的产生

一般由于子标签使用了float属性，使得父级标签无法按照预想的那样撑开，这样就会产生浮动。

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			#div{
				border: 1px solid red;
				width: 250px;
			}
			#div1{
				width: 100px;
				height: 100px;
				float: left;
				border: 1px solid black;
			}
			#div2{
				width: 100px;
				height: 100px;
				float: right;
				border: 1px solid black;
			}
		</style>
	</head>
	<body>
		<div id="div">
			<div id="div1"></div>
			<div id="div2"></div>
		</div>
	</body>
</html>

效果图：

2.产生浮动的影响

背景不能显示：由于父级标签无法撑大，给了background也无法显示
边框不能撑开：如上图很明显，父级边框还是一条线
margin，padding设置值无法显示

3.解决方案

1.在已知的情况下给父级标签height值

代码

			#div{
				border: 1px solid red;
				width: 250px;
				height: 110px;
			}

效果图：

2.clear：both清除浮动

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			#div{
				border: 1px solid red;
				width: 250px;
			}
			#div1{
				width: 100px;
				height: 100px;
				float: left;
				border: 1px solid black;
			}
			#div2{
				width: 100px;
				height: 100px;
				float: right;
				border: 1px solid black;
			}
			#div3{
				clear: both;
			}
		</style>
	</head>
	<body>
		<div id="div">
			<div id="div1"></div>
			<div id="div2"></div>
			<div id="div3"></div>
		</div>
	</body>
</html>

效果图：

3.父级div添加overflow：hidden属性及属性值

代码

#div{
				border: 1px solid red;
				width: 250px;
				overflow: hidden;
			}

效果如上图

4.总结

以上三点即是兼容各大浏览器清除浮动的方法，其它有的浏览器不兼容有的不兼容的方法就没必要介绍了，大家记住以上三点解决float浮动清除浮动方法。但这里推荐第三点和第二点解决清除浮动方法。

淘技术

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录