float 浮动 《一》clear:both清除浮动 ;《2》设置父元素overflow:hidden来清除浮动
float 浮动 《1》clear:both清除浮动 ;《2》设置父元素overflow:hidden来清除浮动
<1>
浮动float
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
#header {
height:100px;
width:600px;
background:blue;
margin:0px auto; /*上下外边距是0px,左右外边距是自动 即：左右居中*/
}
#main {
/*height:500px;*//*注意：这个#main盒子是一个大盒子，里面包裹着两个小盒子，这个大盒子是没有设置高度的，即它的高度是0px 。当父元素，没有指定高度时，并且它的子元素有浮动，这时，这个父元素的高度不会自动增加（即：不会自适应，它的高度依然是0px）*/
width:600px;
margin:0px auto;
}
#left {
height:300px;
width:150px;
float:left;
background-color:gold
}
#center {
height: 300px;
width: 300px;
float: left;
background: dimgrey;
}
#right {
height: 300px;
width: 150px;
float: left;
background-color: yellow;
}
#bottom {
/*现在我就来说说这个clear 因为#main 这个div是一个大盒子，里面包裹这两个小盒子，这个大盒子没有设置高度，即它的高度为0px，而当大盒子里面的两个小盒子浮动起来了，那么这个#tottom这个下边的盒子就会占据到#header的下面 效果图请看 图1*/
/*clear:both;*/ /*因为上面的三个盒子都浮动了。我这个盒子不想浮动，所有这里我要清除浮动*/
height: 100px;
width: 800px;
margin: 0px auto;
background-color: gray;
}
</style>
</head>
<body >
<div id="header">头（#header）</div>
<div id="main">
<div id="left">左（#left）</div>
<div id="center">中（#center）</div>
<div id="right">右（#right）</div>
</div>
<div id="bottom">下（#bottom）</div>
</body>
</html>
图1
<2>
第一种清除浮动：添加一个空元素，将它css样式设为 clear: both;
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
#header {
height: 100px;
width: 600px;
background: blue;
margin: 0px auto; /*上下外边距是0px,左右外边距是自动 即：左右居中*/
}
#main {
/*height:500px;*/ /*注意：这个#main盒子是一个大盒子，里面包裹着两个小盒子，这个大盒子是没有设置高度的，即它的高度是0px 。当父元素，没有指定高度时，并且它的子元素有浮动，这时，这个父元素的高度不会自动增加（即：不会自适应，它的高度依然是0px）*/
width: 600px;
margin: 0px auto;
}
#left {
height: 300px;
width: 150px;
float: left;
background-color: gold;
}
#center {
height: 300px;
width: 300px;
float: left;
background: dimgrey;
}
#right {
height: 300px;
width: 150px;
float: left;
background-color: yellow;
}
#bottom {
/*现在我就来说说这个clear 因为#main 这个div是一个大盒子，里面包裹这两个小盒子，这个大盒子没有设置高度，即它的高度为0px，而当大盒子里面的两个小盒子浮动起来了，那么这个#tottom这个下边的盒子就会占据到#header的下面 效果图请看 图1*/
/*-----第一种A清除浮动，直接在css里面写-----------*/
clear: both; /*因为上面的三个盒子都浮动了。我这个盒子不想浮动，所有这里我要清除浮动*/
height: 100px;
width: 800px;
margin: 0px auto;
background-color: gray;
}
.clear {
clear: both; /*---------第一种B清除浮动，另外做一个style-------------*/
}
</style>
</head>
<body>
<div id="header">头（#header）</div>
<div id="main">
<div id="left">左（#left）</div>
<div id="center">中（#center）</div>
<div id="right">右（#right）</div>
</div>
<!--<div class="clear"></div>--> <!--如果采用第一种B清除浮动，就在不需要浮动的元素前面添加这样一个空元素，空元素的样式引用.clear样式-->
<div id="bottom">下（#bottom）</div>
</body>
</html>
图2
第二种清除浮动的方法： 给父元素overflow值设置为hidden
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
#header {
height: 100px;
width: 600px;
background: blue;
margin: 0px auto; /*上下外边距是0px,左右外边距是自动 即：左右居中*/
}
#main {
/*height:500px;*/ /*注意：这个#main盒子是一个大盒子，里面包裹着两个小盒子，这个大盒子是没有设置高度的，即它的高度是0px 。当父元素，没有指定高度时，并且它的子元素有浮动，这时，这个父元素的高度不会自动增加（即：不会自适应，它的高度依然是0px）*/
width: 600px;
margin: 0px auto;
overflow:hidden; /*--------------------清除浮动的第二种方法-------------------*/
/*通过设置父元素overflow值设置为hidden ，是最简单的清除浮动的方法，但是如果子元素使用了定位布局，就很难实现*/
}
#left {
height: 300px;
width: 150px;
float: left;
background-color: gold;
}
#center {
height: 300px;
width: 300px;
float: left;
background: dimgrey;
}
#right {
height: 300px;
width: 150px;
float: left;
background-color: yellow;
}
#bottom {
height: 100px;
width: 800px;
margin: 0px auto;
background-color: gray;
}
</style>
</head>
<body>
<div id="header">头（#header）</div>
<div id="main">
<div id="left">左（#left）</div>
<div id="center">中（#center）</div>
<div id="right">右（#right）</div>
</div>
<div id="bottom">下（#bottom）</div>
</body>
</html>