清除浮动的三种方法

最新推荐文章于 2024-09-10 16:53:37 发布

otatoz

最新推荐文章于 2024-09-10 16:53:37 发布

阅读量5.8k

点赞数 4

分类专栏： html及css 文章标签：浮动清除浮动 ::after clear:both

本文链接：https://blog.csdn.net/qq_42720683/article/details/94008926

版权

html及css 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

浮动布局，float:left;会使当前元素脱离文档流，从而失去对父级元素的支撑，如果此时父级元素没有设置高度，下面的元素就会挤上去，因此需要清除浮动

清除浮动的三个常用方法：

给浮动元素的父级元素设置overflow:hidden;
在浮动元素的同级下添加一个空标签，并且设置clear:both;
浮动元素的父级元素使用::after{clear:both;content:'';display:block;}

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>浮动以及清除浮动</title>
</head>
<style>
	*{
		list-style: none;
		padding:0;
		margin: 0;
	}
	.wrap{
		background-color: red;
		margin-bottom: 2em;
		/*方法一：给父元素设置overflow:hidden;*/
		overflow: hidden;
	}
	.FirstUl li{
		float: left;
	}

	.Second{
		background-color: red;
		margin-bottom: 2em;
	}
	.SecondUl li{
		float:left;
	}
	.test{
		/*方法二：在浮动元素的同级添加一个空标签，设置为clear:both;*/
		clear: both;
	}

	.Third{
		background-color: red;
	}
	.ThirdUl li{
		float: left;
	}
	/*方法三：给浮动元素的父元素使用::after{};*/
	.ThirdUl::after{
		content: '';
		display: block;
		clear: both;
	}
</style>
<body>
	<div class="wrap">
		<ul class="FirstUl">
			<li>测试</li>
			<li>测试</li>
			<li>测试</li>
		</ul>
	</div>

	<div class="Second">
		<ul class="SecondUl">
			<li>测试</li>
			<li>测试</li>
			<li>测试</li>
			<div class="test"></div>
		</ul>
	</div>

	<div class="Third">
		<ul class="ThirdUl">
			<li>测试</li>
			<li>测试</li>
			<li>测试</li>
		</ul>
	</div>

</body>
</html>

效果：