CSS清除浮动的方法

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

stick6442

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

阅读量155

点赞数

本文链接：https://blog.csdn.net/jianshou6442/article/details/83340710

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--清除浮动-->
		<!--第一种：使用了overflow: hidden;-->
		<!--<style type="text/css">
			.divcss5{
				width: 400px;
				background: #ECECEC;
				border: 1px solid red;
				overflow: hidden;/*给父元素加入overflow: hidden  保持和子元素一样的高度-清除浮动*/
			}
			.divcss5_left,.divcss5_right{
				width: 180px;
				height: 100px;
				background: #F18300;
				border: 1px solid #0992FB;
			}
			.divcss5_left{
				float: left;
			}
			.divcss5_right{
				float: right;
			}
			
		</style>-->
		<!--第二种：前提是在父元素结束前加入一个div，并设置clear: both;-->
		<!--<style type="text/css">
			.divcss5{
				width: 400px;
				background: #ECECEC;
				border: 1px solid red;
			}
			.divcss5_left,.divcss5_right{
				width: 180px;
				height: 100px;
				background: #F18300;
				border: 1px solid #0992FB;
			}
			.divcss5_left{
				float: left;
			}
			.divcss5_right{
				float: right;
			}
			.clear{/*使用clear: both清楚float造成的浮动*/
				clear: both;
			}
		</style>-->
		<!--第三种：最简单的方法是给元素设定高度，但这种方法不可靠，前提不清楚子元素的内容具体占的高度
			子元素的高度是100px，上下边框的border各占1px，因此父元素的高度是102PX
		-->
		<!--<style type="text/css">
			.divcss5{
				width: 400px;
				background: #ECECEC;
				border: 1px solid red;
				height: 102px;
			}
			.divcss5_left,.divcss5_right{
				width: 180px;
				height: 100px;
				background: #F18300;
				border: 1px solid #0992FB;
			}
			.divcss5_left{
				float: left;
			}
			.divcss5_right{
				float: right;
			}
		</style>-->
		<!--第四种：给父元素加类 clearfix，并且给其类设置
			    content: "";
				display: block;
				clear: both;
				这三个属性的值
		-->
		<style type="text/css">
			.divcss5{
				width: 400px;
				background: #ECECEC;
				border: 1px solid red;
			}
			.divcss5_left,.divcss5_right{
				width: 180px;
				height: 100px;
				background: #F18300;
				border: 1px solid #0992FB;
			}
			.divcss5_left{
				float: left;
			}
			.divcss5_right{
				float: right;
			}
		    .clearfix::after{
				content: "";
				display: block;
				clear: both;
			}
		</style>
	</head>
	<body>
		<div class="divcss5 clearfix">
			<div class="divcss5_right">right</div>
			<div class="divcss5_left">left</div>
		</div>
		<!--以下是前三种方法-->
		<!--<div class="divcss5">
			<div class="divcss5_right">right</div>
			<div class="divcss5_left">left</div>
			<!--<div class="clear"></div>--><!--第二种使用的方法-->
		<!--</div>  -->
	</body>
</html>