Skip to content

清除两测浮动

清除两侧浮动,有扩展父级盒子高度的作用

html
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.container{
				border: solid 1px blue;
				/* overflow:hidden; */
			}
			.class1 {
				width: 200px;
				height: 100px;
				background: palegreen;
				float: left;
			}    

			.class2 {
				width: 250px;
				height: 130px;
				background: gold;
				
				float: left;
			}

			.class3 {
				width: 300px;
				height: 180px;
				background: red;
				float: left;
				
			}
			.clear{
				clear: both;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="class1">我是块级元素1,没有设置浮动</div>
			<div class="class2">我是块级元素2,没有设置浮动222222222222222222222222222222222222222</div>
			<div class="class3">我是块级元素3,没有设置浮动</div>
			<div class="clear"></div>
		</div>

	</body>
</html>

Released under the MIT License.