CSS清除浮动的四种方法

最新推荐文章于 2024-09-05 04:25:37 发布

晓晓涛

最新推荐文章于 2024-09-05 04:25:37 发布

阅读量1.1k

点赞数 1

分类专栏： CSS/CSS3 文章标签： css html css3

本文链接：https://blog.csdn.net/Anicca36/article/details/111600551

版权

本文详细介绍了CSS中清除浮动的四种方法：1) 使用div空标签；2) 设置父元素的overflow为hidden；3) 应用伪元素选择器:after；4) 结合:before和:after伪元素。这四种方法旨在解决因浮动元素导致的父级元素高度塌陷问题。

摘要由CSDN通过智能技术生成

CSS清除浮动的四种方法

第一种：使用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>
    <