CSS清除浮动的四种方法

最新推荐文章于 2024-04-29 16:58:49 发布

柏灿

最新推荐文章于 2024-04-29 16:58:49 发布

阅读量1.4w

点赞数 7

分类专栏： css 文章标签：清除浮动 BFC overflow:hidden 伪元素内墙法

本文链接：https://blog.csdn.net/shan1991fei/article/details/109388189

版权

css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

前言

浮动能实现网页排版布局，但是同样也会给网页带来一定的问题(父盒子高度塌陷)，下面我们就整理一下几种清楚浮动的方法

一、父盒子设置固定高度清除浮动

缺点：使用不灵活，后期不易维护

例：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>清除浮动</title>
	<style type="text/css">
		.father{
            /*父盒子设置固定高度*/
			height: 100px;
			border: 1px solid red;
		}
		.child{
			width: 100px;
			height: 100px;
			float: left;
			background-color: green;
		}
	</style>
</head>
<body>
	<div class="father">
		<div class="child">child</div>
	</div>

</body>
</html>

二、内墙法清除浮动

在浮动元素的后面加一个空的块级元素(通常是div),设置该元素clear:both；属性。

缺点：结构冗余

例：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>清除浮动</title>
	<style type="text/css">
		.father{
			border: 1px solid red;
		}
		.child{
			width: 100px;
			height: 100px;
			float: left;
			background-color: green;
		}
		.clearfix{
			clear: both;
		}
	</style>
</head>
<body>
	<div class="father">
		<div class="child">child</div>
		<div class="clearfix"></div>
	</div>

</body>
</html>

三、伪元素清除浮动

延续内墙法，利用伪元素清除浮动

例：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>清除浮动</title>
	<style type="text/css">
		.father{
			border: 1px solid red;
		}
		.child{
			width: 100px;
			height: 100px;
			float: left;
			background-color: green;
		}
		.cleafix:after{
			content:'.';
			display: block;
			clear: both;
			overflow: hidden;
			height: 0;
		}
		
	</style>
</head>
<body>
	<div class="father clearfix">
		<div class="child">child</div>
	</div>

</body>
</html>

四、overflow: hidden

overflow: hidden;会形成一个BFC区域，浮动和清除浮动智慧应用到当前BFC区域，

浮动不会影响其它BFC中元素的布局，而清除浮动只能清除同一BFC中在它前面的元素的浮动

例：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>清除浮动</title>
	<style type="text/css">
		.father{
			overflow: hidden;
			border: 1px solid red;
		}
		.child{
			width: 100px;
			height: 100px;
			float: left;
			background-color: green;
		}
		
	</style>
</head>
<body>
	<div class="father">
		<div class="child">child</div>
	</div>

</body>
</html>

总结

第四种最简便，根据情况选择使用第三第四种

柏灿

关注

7
点赞
踩
7

收藏

觉得还不错? 一键收藏
1
评论
CSS清除浮动的四种方法

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、pandas是什么？二、使用步骤 1.引入库 2.读入数据总结前言浮动能实现网页排版布局，但是同样也会给网页带来一定的问题(父盒子高度塌陷)，下面我们就整理一下几种清楚浮动的方法一、父盒子设置固定高度清除浮动缺点：使用不灵活，后期不易维护例： <!DOCTYPE html><html><head> ...
复制链接

扫一扫