清除浮动带来的副作用

为什么要清除浮动

 1. 浮动影响原有布局方式
 2. 如果不清除浮动，就会盖住你下面兄弟级的内容或者你上一级的内容
 3. 如果你的子元素没有清除浮动，你的父级元素就不能靠子元素撑大，就需要自己设置宽高

清除浮动的方法

 1. 父级div中定义一个overflow:hidden
 

<style type="text/css">
.div1{
	background-color: #080808;
	border: 1px solid red;
	width: 500px;
	overflow: hidden;
}
.left{
	float: left;
	width: 200px;
	height: 300px;
	background-color: #ccc;
}
.right{
	float: left;
        width: 200px;
	height: 100px;
	background-color: #ccc;
}
</style>

/*html代码*/
<div class="div1">
	<div class="left">left</div>
	<div class="right">right</div>
</div>

原理：浏览器会自动检查浮动区域的高度

优点：简单，代码量少

缺点：必须定义width或者zoom:1，不能和定位配合使用，因为他最主要的就是超出内容不显示

建议：一般不用看情况定，你也可以设置为overflow:auto：但是内容一旦超出就会出现滚动条

2.结尾加一个空div设置样式clear:both

<div class="div1">
	<div class="left">left</div>
	<div class="right">right</div>
	<div style="clear: both;"></div>
</div>

原理：教科书式的使用清除浮动的方法

优点：代码量少，浏览器支持好

缺点：看起来不是很好，大量的行类样式也影响优化

建议：以前常用

3.父级div定义高度

<style type="text/css">
.div1{
	background-color: #080808;
	border: 1px solid red;
	width: 500px;
	height: 300px;
}
.left{
	float: left;
	width: 200px;
	height: 300px;
	background-color: #ccc;
}
.right{
	float: left;
	width: 200px;
	height: 100px;
	background-color: #ccc;
}
</style>

/*HTML代码*/
<div class="div1">
	<div class="left">left</div>
	<div class="right">right</div>
</div>

原理：浏览器自动获取不了，自己就加一个不就好了

优点：代码量少，简单

缺点：需要准确的高度，不太符合现在网页的需求

建议：不推荐使用，如果你的高度是固定的也可以用

4.父级div定义一个伪类：after和zoom

<style type="text/css">
.div1{
	background-color: #080808;
	border: 1px solid red;
}
.div1:after{
	display: block;
	clear: both;
	content: "";  /*内容为空*/
}
.left{
	float: left;
	width: 200px;
	height: 300px;
	background-color: #ccc;
}
.right{
	float: left;
	width: 200px;
	height: 100px;
	background-color: #ccc;
}
</style>

/*HTML代码*/
<div class="div1">
	<div class="left">left</div>
	<div class="right">right</div>
</div>

优点：浏览器支持好，不容易出问题（腾讯、网易、新浪、小米等等大型网站都在用你不用）

缺点：代码量大想要浏览器都支持看下面的代码吧

建议：建议使用，本人就是用的这种方法，定义一个公共类就OK

<style type="text/css">
.div1{
	background-color: #080808;
	border: 1px solid red;
}
.div1:after{
	display: block;
	clear: both;
	content: "";  /*内容为空*/
	visibility: hidden; 
	height: 0;
}
.div1{zoom: 1;}
.left{
	float: left;
	width: 200px;
	height: 300px;
	background-color: #ccc;
}
.right{
	float: left;
	width: 200px;
	height: 100px;
	background-color: #ccc;
}
</style>

/*html代码*/
<div class="div1">
    <div class="left">left</div>
    <div class="right">right</div>
</div>