清除浮动的方式

什么是浮动
为什么要清除浮动

方式一

给父容器添加after伪类和zoom样式（推荐使用）可以写成公共样式，zoom兼容IE

	<style>
	#container{border: 2px solid red;margin: 30px auto;width: 90%;}
	.clearfix{zoom: 1;}
	.clearfix:after{content: "";display: block;clear: both;visibility:hidden;height:0}
	.float1,.float2,.float3{height: 100px;background: green;width: 200px;float: left;}
	.float2{background-color: #0087D1;}
	.float3{background-color: blue;float: right;}
	</style>
	<div id="container" class="clearfix">
			<div class="float1"><h2>float left</h2></div>
			<div class="float2"><h2>float left</h2></div>
			<div class="float3"><h2>float right</h2></div>
	</div>

方式二

给父元素添加样式overflow: hidden;或者overflow: auto;(不推荐该用法，使用hidden时当内容较多时会被遮挡，使用auto时内容较多会出现滚动条。构建块格式化上下（BFC）)

	<style>
	#container1{border: 2px solid red;margin: 30px auto;width: 90%;overflow: hidden;}
	#container2{border: 2px solid red;margin: 30px auto;width: 90%;overflow: auto;}
	.float1,.float2,.float3{height: 100px;background: green;width: 200px;float: left;}
	.float2{background-color: #0087D1;}
	.float3{background-color: blue;float: right;}
	</style>
	<div id="container1">
			<div class="float1"><h2>float left</h2></div>
			<div class="float2"><h2>float left</h2></div>
			<div class="float3"><h2>float right</h2></div>
	</div>
	<div id="container2">
			<div class="float1"><h2>float left</h2></div>
			<div class="float2"><h2>float left</h2></div>
			<div class="float3"><h2>float right</h2></div>
	</div>

方式三

添加空标签，并设置clear:both的样式（不推荐使用，可能会增加很多空标签，代码冗余）

	<style>
	#container{border: 2px solid red;margin: 30px auto;width: 90%;}
	.float1,.float2,.float3{height: 100px;background: green;width: 200px;float: left;}
	.float2{background-color: #0087D1;}
	.float3{background-color: blue;float: right;}
	.clearfix{clear: both;}
	</style>
	<div id="container">
			<div class="float1"><h2>float left</h2></div>
			<div class="float2"><h2>float left</h2></div>
			<div class="float3"><h2>float right</h2></div>
			<div class="clearfix"></div>
	</div>

方式四

给父容器设置高度 （不推荐，当浮动元素和设置的容器高度不一样时会出现问题，适合固定高度布局时使用）

	<style>
	#container{border: 2px solid red;margin: 30px auto;width: 90%;height: 100px;}
	.float1,.float2,.float3{height: 100px;background: green;width: 200px;float: left;}
	.float2{background-color: #0087D1;}
	.float3{background-color: blue;float: right;}
	</style>
	<div id="container">
			<div class="float1"><h2>float left</h2></div>
			<div class="float2"><h2>float left</h2></div>
			<div class="float3"><h2>float right</h2></div>
	</div>

方式五

让父元素一起浮动（不推荐，可能会影响父元素的兄弟元素和其父元素的排列布局）

	<style>
	#container{border: 2px solid red;margin: 30px auto;width: 90%;float: left;}
	.float1,.float2,.float3{height: 100px;background: green;width: 200px;float: left;}
	.float2{background-color: #0087D1;}
	.float3{background-color: blue;float: right;}
	</style>
	<div id="container">
			<div class="float1"><h2>float left</h2></div>
			<div class="float2"><h2>float left</h2></div>
			<div class="float3"><h2>float right</h2></div>
	</div>

方式六

给父元素设置display:table或者display:inline-block(构建块格式化上下文（BFC）)

	<style>
	#container1{border: 2px solid red;margin: 30px auto;width: 90%;display:table;}
	#container2{border: 2px solid red;margin: 30px auto;width: 90%;display:inline-block;}
	.float1,.float2,.float3{height: 100px;background: green;width: 200px;float: left;}
	.float2{background-color: #0087D1;}
	.float3{background-color: blue;float: right;}
	</style>
	<div id="container1">
			<div class="float1"><h2>float left</h2></div>
			<div class="float2"><h2>float left</h2></div>
			<div class="float3"><h2>float right</h2></div>
	</div>
	<div id="container2">
			<div class="float1"><h2>float left</h2></div>
			<div class="float2"><h2>float left</h2></div>
			<div class="float3"><h2>float right</h2></div>
	</div>

---

如果有书写错误或者理解不到位的地方，欢迎各位指正，谢谢！