清除浮动的四种方法

最新推荐文章于 2022-03-07 16:30:14 发布

小小菜鸟2000

最新推荐文章于 2022-03-07 16:30:14 发布

阅读量246

点赞数

分类专栏： web前端基础文章标签： css

本文链接：https://blog.csdn.net/sunzemin1234/article/details/103920853

版权

web前端基础专栏收录该内容

5 篇文章 0 订阅

订阅专栏

清除浮动的四种方法：
1、直接清除浮动
clear:both
2、给父级设置宽度和高度，让两个父级div里面的子元素的浮动不在相互影响
3、给父级添加overflow:hidden,让父级自动扩展，包裹住子元素
4、after
代码如下：

<!DOCTYPE html>
<html>
<head>
	<title>清除浮动</title>
</head>
<style type="text/css">
	*{
		margin:0px;
		padding:0px;
		list-style: 0px;
	}
	.inner{
		width:100px;
		height:100px;
		border:5px solid #CCC;
		float:left;
	}
	/*第一种清除浮动方法*/
		/*在第二个imddle的div中的首个inner div 清除浮动*/
/*	.clear{
		clear:both;
	}*/
	/*第二种清除浮动的方法*/
		/*给middle div设置边框包过里面的div，并赋予高度值div是块状元素，当inner div被包裹时，div独占一行*/
/*	.middle{
		border:5px solid orange;
		height:110px;
	}*/
	/*第三种清除东东的方法*/
		/*此方法父级不能有宽高，否则超出部分将被隐藏*/
/*	.middle{
		overflow:hidden;
	}*/
	/*第四种清除浮动的方法，此种最为常用，且比较合适*/
	/*添加一个after属性，将行内元素转换为块状元素，并给块状元素授予宽高，宽度为100%，高度为0*/
	/*最后需要给middle div在加一个overflow属性，以防止清除不了浮动，然后可以有另一个清除浮动的方式来清除浮动，备份用*/
	.middle{
		overflow:hidden;
	}

	.middle:after {
		content:'';
		display:block;
		width:100%;
		height:0px;
		clear:both;
	}
</style>
<body>
	<div class="outer">
		<div class="middle">
			<div class="inner"></div>
			<div class="inner"></div>
			<div class="inner"></div>
			<div class="inner"></div>
		</div>
		<div class="middle">
			<div class="inner clear"></div>
			<div class="inner"></div>
			<div class="inner"></div>
			<div class="inner"></div>
		</div>
	</div>
</body>
</html>