CSS清除浮动的三种方法

Mr.指尖舞者

于 2022-04-19 14:53:06 发布

阅读量894

点赞数 6

分类专栏： css总结文章标签： css3

本文链接：https://blog.csdn.net/qq_56989560/article/details/124273739

版权

css总结专栏收录该内容

3 篇文章 0 订阅

订阅专栏

第一种：使用div空标签法

<head>
<style>
	.left, 
	.right {
		float: left;
		width: 200px;
		height: 200px;
		background-color: blue;
	}

	.test {
		width: 500px;
		height: 200px;
		background-color: red;
	}
</style>
</head>
<body>
	<div class="parent">
		<div class="left"></div>
		<div class="right"></div>
		<!-- 清除浮动 -->
		<div style="clear: both"></div>
    </div>
    <div class="test"></div>
</body>

第二种：父元素使用overflow: hidden

<head>
<style>
	.left, 
	.right {
		float: left;
		width: 200px;
		height: 200px;
		background-color: blue;
	}

	.test {
		width: 500px;
		height: 200px;
		background-color: red;
	}

	/* 清除浮动 */
	.parent {
		overflow: hidden;
	}
</style>
</head>
<body>
	<div class="parent">
		<div class="left"></div>
		<div class="right"></div>
    </div>
    <div class="test"></div>
</body>

第三种：伪元素选择器:after

<head>
<style>
	.left, 
	.right {
		float: left;
		width: 200px;
		height: 200px;
		background-color: blue;
	}

	.test {
		width: 500px;
		height: 200px;
		background-color: red;
	}

	/* 清除浮动 */
	.parent::after {
		content: "";
		display: block;
		height: 0;
		visibility: hidden;
		clear: both;
	}
	/* IE6/7 清除浮动 */
	.parent {
		*zoom: 1;
	}
</style>
</head>
<body>
	<div class="parent">
		<div class="left"></div>
		<div class="right"></div>
    </div>
    <div class="test"></div>
</body>