1.浮动产生负作用
- 背景不能显示
由于浮动产生，如果对父级设置了（CSS background背景）CSS背景颜色或CSS背景图片，而父级不能被撑开，所以导致CSS背景不能显示。 - 边框不能撑开
如果父级设置了CSS边框属性（css border），由于子级里使用了float属性，产生浮动，父级不能被撑开，导致边框不能随内容而被撑开。 - margin padding设置值不能正确显示
由于浮动导致父级子级之间设置了css padding、css margin属性的值不能正确表达。特别是上下边的padding和margin不能正确显示。
2. 清除浮动(真正的叫法叫闭合标签）
目的：为父盒子撑开高度，解决父盒子为0的问题
需要清除浮动的原因：一般都浮动了，不同div的盒子都会紧贴在一起，块级元素要并列需要浮动，但是要两个都浮动的盒子上下排列，不紧跟，并且保持第二个盒子里面的内容并排，就需要清除第二个盒子的浮动。简单地说，浮动是因为使用了float:left或float:right或两者都有而产生的浮动。
- 方法1.为父级元素添加高度（这种方法儿子最高的高度变了，父亲的高度也要手动撑开，调成跟儿子一样大）；如果父级元素box1没写高度的话没写高度，在用box2的时候，会自动贴到box1后面，所以box1要设置高度，为儿子们撑起一片天，才不会让外人入侵；
如果一个元素要浮动，那么它的祖先元素一定要有高度。高度的盒子，才能关住浮动。
只要浮动在一个有高度的盒子中，那么这个浮动就不会影响后面的浮动元素。所以就是清除浮动带来的影响了。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
/*内外边距为0，元素贴边显示*/
}
.box1{
width: 400px;
/*height: 80px;为父级添加高度*/
background-color: black;
}
.b1{
float: left;
width: 80px;
height: 50px;
background: green;
}
.b2{
float: left;
width: 80px;
margin-left: 10px;
height: 50px;
background: orange;
}
.b3{
margin-left: 10px;
float: left;
width: 80px;
height: 50px;
background: green;
}
.box2{
width: 400px;
height: 80px;
background: red;
}
.b4{
float: left;
width: 80px;
height: 50px;
background: purple;
}
</style>
</head>
<body>
<div class="box1">
<div class="b1"></div>
<div class="b2"></div>
<div class="b3"></div>
</div>
<div class="box2">
<div class="b4"></div>
<div class="b5"></div>
<div class="b6"></div>
</div>
</body>
</html>
没高度的结果：
Paste_Image.png
为父级增加高度的结果（父级的高度比儿子高，或与最大的相等）：
Paste_Image.png
- 方法2：用clear：coth(总共用的有三种放置clear：both的方法，清除左右浮动：外墙法），又称隔墙法，不能使父亲撑开高度。隔开两部分的浮动
clear:both是指不允许元素浮动在该元素的两侧。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box1{
width: 400px;
/*height: 80px;方法1为父级添加高度*/
background-color: black;
}
.b1{
float: left;
width: 80px;
height: 50px;
background: green;
}
.b2{
float: left;
width: 80px;
margin-left: 10px;
height: 50px;
background: orange;
}
.b3{
margin-left: 10px;
float: left;
width: 80px;
height: 50px;
background: green;
}
.box2{
width: 400px;
height: 80px;
background: red;
}
.b4{
float: left;
width: 80px;
height: 50px;
background: purple;
}
.cb1{
clear: both;
/*clear: both;方法2，清除左右浮动*/
}
</style>
</head>
<body>
<div class="box1">
<div class="b1"></div>
<div class="b2"></div>
<div class="b3"></div>
</div>
<div class="cb1"></div>
<!-- 在两个盒子之间再添加一个box -->
<div class="box2">
<div class="b4"></div>
<div class="b5"></div>
<div class="b6"></div>
</div>
</body>
</html>
在两个盒子间添加盒子显示结果：
Paste_Image.png
- 方法3：同样用clear：both（内墙法），但是在一个盒子内在添加一个盒子（相比在之间添加盒子，这种方法能够为自动为父级的盒子添加合适的高度，该高度是子级儿子撑出的最高的高度,因为如果两个盒子父级都没有高度为0的话，就没办法用背景色修饰。因为（浮动）脱标的元素是不能把一个元素撑出高度的）-还有一种可以写在第二个盒子的div里，但是不能用margin.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
.*{
margin: 0;
padding: 0;
}
.box1{
width: 400px;
/*height: 80px;为父级添加高度*/
background-color: black;
}
.b1{
float: left;
width: 80px;
height: 50px;
background: green;
}
.b2{
float: left;
width: 80px;
margin-left: 10px;
height: 50px;
background: orange;
}
.b3{
margin-left: 10px;
float: left;
width: 80px;
height: 50px;
background: green;
}
.box2{
width: 400px;
height: 80px;
background: red;
}
.b4{
float: left;
width: 80px;
height: 50px;
background: purple;
}
.cb1{
clear: both;
/*clear: both;清除浮动*/
}
<!-- 为两个盒子添加缝隙
.h1{
height:20px;
background: green;
}
-->
</style>
</head>
<body>
<div class="box1">
<div class="b1"></div>
<div class="b2"></div>
<div class="b3"></div>
<div class="cb1 h1"></div>
<!-- 在一个盒子之间再添加一个box -->
</div>
<div class="box2">
<!-- 还有一个方法3可以把class="cb1 h1"写在box2这里，用clear：both，但是margin会失效，不能产生缝隙。 -->
<div class="b4"></div>
<div class="b5"></div>
<div class="b6"></div>
</div>
</body>
</html>
显示结果：
Paste_Image.png
- 方法四：overflow：hidden:溢出隐藏，可以把溢出边框的内容隐藏掉；
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
div{
width: 500px;
height: 60px;
color: blue;
border: 10px solid red;
overflow: hidden;
}
</style>
</head>
<body>
<div>
<div>
你看看我有多大你看看我有多大你看看我有多大
你看看我有多大你看看我有多大你看看我有多大
你看看我有多大你看看我有多大你看看我有多大
你看看我有多大你看看我有多大你看看我有多大
你看看我有多大你看看我有多大你看看我有多大
你看看我有多大你看看我有多大你看看我有多大
你看看我有多大你看看我有多大你看看我有多大
你看看我有多大你看看我有多大你看看我有多大
你看看我有多大你看看我有多大你看看我有多大
你看看我有多大你看看我有多大你看看我有多大结束
</div>
</div>
</body>
</html>
使用前：
Paste_Image.png
使用后：
Paste_Image.png
但是当遇到浮动的时候，他的效果与内墙法是一样的，能为父亲增加高度，记得是为父级的盒子添加。触发bfc模式，不用再清除浮动。但是缺点是当有超出部分会被清除掉，无法显示
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box1{
width: 400px;
/*height: 80px;为父级添加高度*/
background-color: black;
overflow: hidden;
}
.b1{
float: left;
width: 80px;
height: 50px;
background: green;
}
.b2{
float: left;
width: 80px;
height: 50px;
background: orange;
}
.b3{
float: left;
width: 80px;
height: 50px;
background: green;
}
.box2{
margin-top: 10px;
width: 400px;
background: red;
}
.b4{
float: left;
width: 80px;
height: 80px;
background: purple;
}
/*.cb1{
clear: both;
background: black;
/*clear: both;清除浮动*/
/*.h1{
height:20px;
background: green;
}*/
</style>
</head>
<body>
<div class="box1">
<div class="b1"></div>
<div class="b2"></div>
<div class="b3"></div>
<!-- 在一个盒子之间再添加一个box -->
</div>
<!-- <div class="cb1 h1"></div>
--><div class="box2">
<div class="b4"></div>
<div class="b5"></div>
<div class="b6"></div>
</div>
</body>
</html>
使用前：
Paste_Image.png
使用后：
Paste_Image.png
- 方法五（压轴方法：网易；要背）：
清除浮动真正叫法叫闭合浮动；伪元素（放在浮动的父元素上形成闭合）：
.clearfix:after { <----在类名为“clearfix”的元素内最后面加入内容；
content: "."; <----内容为“.”就是一个英文的句号而已。也可以不写。
display: block; <----加入的这个元素转换为块级元素。
clear: both; <----清除左右两边浮动。
visibility: hidden; <----可见度设为隐藏。注意它和display:none;是有区别的。
仍然占据空间，只是看不到而已；
height: 0; <----高度为0；
font-size:0; <----字体大小为0；
}
整段代码就相当于在浮动元素后面跟了个宽高为0的空div，然后设定它clear:both来达到清除浮动的效果。（这个css的原理是经过使用 after伪对象,它将在应用clearfix的元素结尾添加content中的内容,也就是一个".",并且把他设置为块级元素 (display="block");高度设置为0,clear="both",然后将其内容隐藏掉(visibility="hidden").这样就会撑开此块级元素.）
之所以用它，是因为，你不必在html文件中写入大量无意义的空标签，又能清除浮动。
IE6用zoom:1.代码如下;
Paste_Image.png
.clearfix { *zoom:1;} <----这是针对于IE6的，因为IE6不支持:after伪类，这个神奇的zoom:1让IE6的元素可以清除浮动来包裹内部元素。具体意思的话，不用深究，听说微软的工程师自己都无法解释清楚。height:1%效果也是一样。
总结：
清除浮动的方法：
1. 额外标签法
2. Overflow: hidden 触发 bfc 模式 就不用清除浮动
3. 伪元素
.clearfix:after {
content:””;
Visibility:hidden;
Display:block;
Height:0;
Clear:both;
}
.clearfix{
Zoom:1;
}
4.双伪元素：
.clearfix:before,.clearfix:after{
display: table;
content: "";
}
.clearfix:after {
clear: both;
}
.clearfix {
zoom: 1;
}
