<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
body {
}
div{
width:auto;
height:auto;
}
a{
float:left;
displaay:inline;
padding:40px;
background-color:#CCC;
}
a:hover{
background-color:#666;
}
</style>
</head>
<body>
<div>
<a href="#">link1asdasdsad</a>
<a href="#">link1asdasdsad</a>
<a href="#">link1asdasdsad</a>
<a href="#">link1asdasdsad</a>
</div>
</body>
</html>
比如上面这段代码，按理所有a元素在div里面，所以整个a元素就是div盒模型的内容，也就是element。可是我在用chrom调试的时候，我点击div标签，却element什么都没有，给个图像：
看嘛，按理来说整个div应该把全部内容包括啊，但是为何只有这一点。
我看其他很多网页的源代码，都是像我想的那样，div如果是整个大块这个div是直接包括整个大块的，为什么我这个不行。我不知道是不是我对盒模型的理解不对，我的理解是如果是一个大块div包括，这个div里面的element就是div里面的整个代码了。但是很多时候却不是，所以我还想问问这个盒模型到底是怎么回事？因为学的比较肤浅。
11 个解决方案
#1
我觉得是我理解盒模型的机制出了问题吧，整个div里面的代码并不是所有都是div的element,而是只有文字内容是element，还是什么？尝试了很多，比如div的属性设置，比如width,height,margin,padding,各种设置都不行，不知道是怎么搞得，设置成auto也不行！
#2
因为a标签加了float属性，外部div无法确定高度。如果要div的高度包裹标签a，请加上div{overflow: hidden;}，让div自动计算高度
#3
a标签被设置了float属性，它脱离了文档流，外边的div包不住它，width和height auto没作用了
#4
恩，对的，那样div的确可以自动确定自己的height了，但是，上两个图
这个div的高度为什么只是文字的高度，element没有包括所有a标签，也就是div的element是里面所有标签的整个盒模型，也就是包括了padding,margin，在我的理解里面一个盒模型里面嵌套一个盒模型，嵌套的那个盒模型的整个模型就是父模型的element元素，但是好像不是这样的，我觉得应该是我对文档流那些不太理解，如果有人愿意给我解释下先谢谢了，因为自己也没看太多css的书，只走了一偏w3c，下了css权威指南也在慢慢看！谢谢了！
这个div的高度为什么只是文字的高度，element没有包括所有a标签，也就是div的element是里面所有标签的整个盒模型，也就是包括了padding,margin，在我的理解里面一个盒模型里面嵌套一个盒模型，嵌套的那个盒模型的整个模型就是父模型的element元素，但是好像不是这样的，我觉得应该是我对文档流那些不太理解，如果有人愿意给我解释下先谢谢了，因为自己也没看太多css的书，只走了一偏w3c，下了css权威指南也在慢慢看！谢谢了！
#5
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
div{
}
#x1{
padding:10px;
background-color:red;
}
</style>
</head>
<body>
<div>
<x id="x1">
<h1>按时发发发</h1>
</x>
</div>
</body>
</html>
这段代码，我真的想不通为什么是这个结果！
h1包括在x里面，无论以h1的element作为x的element还是整个h1的盒模型作为x的element都不会这样，所以实在想不通，不知道这个css这个机制是怎么计算得来的，忘高人求教，谢谢！
#6
怎么没人啊，还是没有解决啊！！！！
#7
x是你自己 自定义的标签，用html本身的标签就可以了。
#8
你的a标签全部设置了浮动，脱离了文档流，当然撑不开父级div了~
在当前文档流中div里是没元素的，而a标签在浮动流中，你也可以为a标签在z-index属性值更高的一层中。
在当前文档流中div里是没元素的，而a标签在浮动流中，你也可以为a标签在z-index属性值更高的一层中。
#9
<!doctype html>
<html>
<head>
<meta charset="gb2312">
<title>无标题文档</title>
<style type="text/css">
body {
}
div{
width:auto;
height:auto;
}
a{
float:left;
display:inline;
padding:40px;
background-color:#CCC;
}
a:hover{
background-color:#666;
}
</style>
</head>
<body>
<div>
<a href="#">link1asdasdsad</a>
<a href="#">link1asdasdsad</a>
<a href="#">link1asdasdsad</a>
<a href="#">link1asdasdsad</a>
<div style="clear:both;">
</div>
</body>
</html>
你试试吧
#10
<div style="clear:both;">这里忘记关闭标签了你加一个
</div>好久没用记事本了
#11
（64）浮动float
①float
②值：
left 向左浮动
right 向右浮动
③特点：
默认宽度——内容宽度（但可以通过width和height设置）；
脱离文档流（非完全脱离）；
向指定方向一直移动（根据值），移动到不能移动为止
④float的元素，在同一个文档流（所以同一个文档流中的float元素，不会重叠）；
float，对元素而言，脱离文档流；对内容，在文档流（不会遮挡内容）；
为了说明上面那点，来一个代码：
<html>
<head>
<meta charset=utf-8"/>
<style>
.a{
width:500px;
height:150px;
background-color:green;
}
#b{
float:left;
width:50px;
height:50px;
background-color:#ccc;
}
#c{
width:50px;
height:100px;
background-color:#aaa;
}
</style>
</head>
<body>
<div class="a">
<div id="b">
ABC
</div>
<div id="c">
FEDCBA
</div>
</div>
</body>
</html>
b的高度是50px；c的高度是100px。在没有float的情况下，b和c的高度正好撑满了外面的div（因为div是块级元素，所以默认情况下他们不会同行显示）；
若完全脱离文档流，那么会导致b和c重叠，即无法看到c（把float改为position:absolute;）或者b（两个都加上position:absolute;）的内容。
然而，使用float的实际情况如图：
A挡住了B的一部分，但是并没有挡住B的内容（注意，是内容FEDCBA，而不是content区域）；
⑤所以可以利用float会使内容不会被遮挡的特性，来达成某些目的。
潜在问题：假设float元素在A块中，但由于其脱离文档流的特性，其高度／宽度不会被Ａ块所考虑。假设float元素的高度比A块要大，到了B块的范围内了。
会导致float元素覆盖B块的区域，B块的内容将避开该区域。
如图：
⑥解决占用后续元素位置空间的办法：
clear
值：
both、left、right、none（默认）、inherit（继承）
特点：
应用于float的后续元素＋块级元素；
方法一：
在float元素后，你想要清除浮动的地方，加一个块，然后给其附上clear:both的css属性。这里是一个加空块的示例：
HTML：<div class="clearfloat"></div>
CSS：
.clearfloat{
width:0;
clear:both;
overflow:hidden;
visibility:hidden;
}
举个例子，假设有A块和B块，然后A块有子块a1块和a2块（div）。而a1块是float元素。（注意，除a1块和B块之外，都没有设置高度）
正常情况下：a2块位于a1块右边（行级元素），a1块因为设置css样式时高度比较高，占用了B块的一部分（遮挡了部分B块的区域）；
《1》在a2块前加入这个标签，于是a2块出现在a1块的下方（浮动无效），A块的float元素没有遮挡B块，A块和B块的正常的相对位置。另外，a1块后a2块前，是属于A块的部分。
《2》在A块后加入这个标签，a2块依然位于a1块后面（浮动有效），但是B块不再被遮挡。另外，A块后，B块前有一部分，其属于A、B的父元素的区域。
《3》在a2块中加入这个标签（内容前和内容后两种情况），内容前则a2的内容在a1的下方，内容后则a2的内容在a1的右方。另外，这两种情况，a1块后都是a2块的部分。
总结：
也就是说，在 不设置 浮动元素的父元素、兄弟元素的 高度 情况下，其父元素、兄弟元素的高度，可以根据 clearfloat所在的标签 来 自适应 。
（注：若设置的话，则不能自适应）
附HTML代码，可以自己试试放在不同的情况。
<html>
<head>
<meta charset=utf-8"/>
<style>
.main{
width:500px;
height:200px;
background-color:#ddd;
}
.A{
width:100px;
background-color:blue;
outline:2px dashed blue;
}
.a1{
height:100px;
float:left;
background-color:#ccc;
}
.a2{
background-color:green;
}
.clearfloat {
content:".";
display:block;
height:0;
clear:both;
overflow:hidden;
visibility:hidden;
}
.B{
width:100px;
height:100px;
background-color:Yellow;
}
</style>
</head>
<body>
<div class="main">
<div class="A">
<div class="a1">
aaa
</div>
<div class="a2">
bbbb
<br class="clearfloat"/>
</div>
</div>
<div class="B">
ppp
</div>
</div>
</body>
</html>
方法二：
设置一个类class="clearfloat "，然后利用伪类选择器“:after”，来给该样式的块后面添加一个块级元素。当你想要清除某个块的float浮动时，给其添加一个clearfloat的class即可。
例如CSS样式：
.clearfloat:after{
content:".";
display:block;
height:0;
clear:both;
overflow:hidden;
visibility:hidden;
}
你想要清除A块之后的浮动（达成上面《2》的目的），在A块的标签class属性中，像这样<div class="A clearfloat">添加绿色字体部分即可。
如果想要达成上面《1》中的目的，那么在a2的样式中添加clear:both这条CSS属性即可。
注意，不知为何，在float元素中添加.clearfloat，然后利用其after是无效的。可能是因为after依然属于float元素吧。
总结：
也就是说，如果通过加样式的方法，若是想从哪个元素之后，float的浮动不生效，那么就在其的class加入上述代码（float元素本身不可加）。
若是从哪个元素开始，float浮动不生效，那么就把伪类选择器的after改为before，并在这个元素的class中加入clearfloat即可。
①float
②值：
left 向左浮动
right 向右浮动
③特点：
默认宽度——内容宽度（但可以通过width和height设置）；
脱离文档流（非完全脱离）；
向指定方向一直移动（根据值），移动到不能移动为止
④float的元素，在同一个文档流（所以同一个文档流中的float元素，不会重叠）；
float，对元素而言，脱离文档流；对内容，在文档流（不会遮挡内容）；
为了说明上面那点，来一个代码：
<html>
<head>
<meta charset=utf-8"/>
<style>
.a{
width:500px;
height:150px;
background-color:green;
}
#b{
float:left;
width:50px;
height:50px;
background-color:#ccc;
}
#c{
width:50px;
height:100px;
background-color:#aaa;
}
</style>
</head>
<body>
<div class="a">
<div id="b">
ABC
</div>
<div id="c">
FEDCBA
</div>
</div>
</body>
</html>
b的高度是50px；c的高度是100px。在没有float的情况下，b和c的高度正好撑满了外面的div（因为div是块级元素，所以默认情况下他们不会同行显示）；
若完全脱离文档流，那么会导致b和c重叠，即无法看到c（把float改为position:absolute;）或者b（两个都加上position:absolute;）的内容。
然而，使用float的实际情况如图：
A挡住了B的一部分，但是并没有挡住B的内容（注意，是内容FEDCBA，而不是content区域）；
⑤所以可以利用float会使内容不会被遮挡的特性，来达成某些目的。
潜在问题：假设float元素在A块中，但由于其脱离文档流的特性，其高度／宽度不会被Ａ块所考虑。假设float元素的高度比A块要大，到了B块的范围内了。
会导致float元素覆盖B块的区域，B块的内容将避开该区域。
如图：
⑥解决占用后续元素位置空间的办法：
clear
值：
both、left、right、none（默认）、inherit（继承）
特点：
应用于float的后续元素＋块级元素；
方法一：
在float元素后，你想要清除浮动的地方，加一个块，然后给其附上clear:both的css属性。这里是一个加空块的示例：
HTML：<div class="clearfloat"></div>
CSS：
.clearfloat{
width:0;
clear:both;
overflow:hidden;
visibility:hidden;
}
举个例子，假设有A块和B块，然后A块有子块a1块和a2块（div）。而a1块是float元素。（注意，除a1块和B块之外，都没有设置高度）
正常情况下：a2块位于a1块右边（行级元素），a1块因为设置css样式时高度比较高，占用了B块的一部分（遮挡了部分B块的区域）；
《1》在a2块前加入这个标签，于是a2块出现在a1块的下方（浮动无效），A块的float元素没有遮挡B块，A块和B块的正常的相对位置。另外，a1块后a2块前，是属于A块的部分。
《2》在A块后加入这个标签，a2块依然位于a1块后面（浮动有效），但是B块不再被遮挡。另外，A块后，B块前有一部分，其属于A、B的父元素的区域。
《3》在a2块中加入这个标签（内容前和内容后两种情况），内容前则a2的内容在a1的下方，内容后则a2的内容在a1的右方。另外，这两种情况，a1块后都是a2块的部分。
总结：
也就是说，在 不设置 浮动元素的父元素、兄弟元素的 高度 情况下，其父元素、兄弟元素的高度，可以根据 clearfloat所在的标签 来 自适应 。
（注：若设置的话，则不能自适应）
附HTML代码，可以自己试试放在不同的情况。
<html>
<head>
<meta charset=utf-8"/>
<style>
.main{
width:500px;
height:200px;
background-color:#ddd;
}
.A{
width:100px;
background-color:blue;
outline:2px dashed blue;
}
.a1{
height:100px;
float:left;
background-color:#ccc;
}
.a2{
background-color:green;
}
.clearfloat {
content:".";
display:block;
height:0;
clear:both;
overflow:hidden;
visibility:hidden;
}
.B{
width:100px;
height:100px;
background-color:Yellow;
}
</style>
</head>
<body>
<div class="main">
<div class="A">
<div class="a1">
aaa
</div>
<div class="a2">
bbbb
<br class="clearfloat"/>
</div>
</div>
<div class="B">
ppp
</div>
</div>
</body>
</html>
方法二：
设置一个类class="clearfloat "，然后利用伪类选择器“:after”，来给该样式的块后面添加一个块级元素。当你想要清除某个块的float浮动时，给其添加一个clearfloat的class即可。
例如CSS样式：
.clearfloat:after{
content:".";
display:block;
height:0;
clear:both;
overflow:hidden;
visibility:hidden;
}
你想要清除A块之后的浮动（达成上面《2》的目的），在A块的标签class属性中，像这样<div class="A clearfloat">添加绿色字体部分即可。
如果想要达成上面《1》中的目的，那么在a2的样式中添加clear:both这条CSS属性即可。
注意，不知为何，在float元素中添加.clearfloat，然后利用其after是无效的。可能是因为after依然属于float元素吧。
总结：
也就是说，如果通过加样式的方法，若是想从哪个元素之后，float的浮动不生效，那么就在其的class加入上述代码（float元素本身不可加）。
若是从哪个元素开始，float浮动不生效，那么就把伪类选择器的after改为before，并在这个元素的class中加入clearfloat即可。
#1
我觉得是我理解盒模型的机制出了问题吧，整个div里面的代码并不是所有都是div的element,而是只有文字内容是element，还是什么？尝试了很多，比如div的属性设置，比如width,height,margin,padding,各种设置都不行，不知道是怎么搞得，设置成auto也不行！
#2
因为a标签加了float属性，外部div无法确定高度。如果要div的高度包裹标签a，请加上div{overflow: hidden;}，让div自动计算高度
#3
a标签被设置了float属性，它脱离了文档流，外边的div包不住它，width和height auto没作用了
#4
恩，对的，那样div的确可以自动确定自己的height了，但是，上两个图
这个div的高度为什么只是文字的高度，element没有包括所有a标签，也就是div的element是里面所有标签的整个盒模型，也就是包括了padding,margin，在我的理解里面一个盒模型里面嵌套一个盒模型，嵌套的那个盒模型的整个模型就是父模型的element元素，但是好像不是这样的，我觉得应该是我对文档流那些不太理解，如果有人愿意给我解释下先谢谢了，因为自己也没看太多css的书，只走了一偏w3c，下了css权威指南也在慢慢看！谢谢了！
这个div的高度为什么只是文字的高度，element没有包括所有a标签，也就是div的element是里面所有标签的整个盒模型，也就是包括了padding,margin，在我的理解里面一个盒模型里面嵌套一个盒模型，嵌套的那个盒模型的整个模型就是父模型的element元素，但是好像不是这样的，我觉得应该是我对文档流那些不太理解，如果有人愿意给我解释下先谢谢了，因为自己也没看太多css的书，只走了一偏w3c，下了css权威指南也在慢慢看！谢谢了！
#5
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
div{
}
#x1{
padding:10px;
background-color:red;
}
</style>
</head>
<body>
<div>
<x id="x1">
<h1>按时发发发</h1>
</x>
</div>
</body>
</html>
这段代码，我真的想不通为什么是这个结果！
h1包括在x里面，无论以h1的element作为x的element还是整个h1的盒模型作为x的element都不会这样，所以实在想不通，不知道这个css这个机制是怎么计算得来的，忘高人求教，谢谢！
#6
怎么没人啊，还是没有解决啊！！！！
#7
x是你自己 自定义的标签，用html本身的标签就可以了。
#8
你的a标签全部设置了浮动，脱离了文档流，当然撑不开父级div了~
在当前文档流中div里是没元素的，而a标签在浮动流中，你也可以为a标签在z-index属性值更高的一层中。
在当前文档流中div里是没元素的，而a标签在浮动流中，你也可以为a标签在z-index属性值更高的一层中。
#9
<!doctype html>
<html>
<head>
<meta charset="gb2312">
<title>无标题文档</title>
<style type="text/css">
body {
}
div{
width:auto;
height:auto;
}
a{
float:left;
display:inline;
padding:40px;
background-color:#CCC;
}
a:hover{
background-color:#666;
}
</style>
</head>
<body>
<div>
<a href="#">link1asdasdsad</a>
<a href="#">link1asdasdsad</a>
<a href="#">link1asdasdsad</a>
<a href="#">link1asdasdsad</a>
<div style="clear:both;">
</div>
</body>
</html>
你试试吧
#10
<div style="clear:both;">这里忘记关闭标签了你加一个
</div>好久没用记事本了
#11
（64）浮动float
①float
②值：
left 向左浮动
right 向右浮动
③特点：
默认宽度——内容宽度（但可以通过width和height设置）；
脱离文档流（非完全脱离）；
向指定方向一直移动（根据值），移动到不能移动为止
④float的元素，在同一个文档流（所以同一个文档流中的float元素，不会重叠）；
float，对元素而言，脱离文档流；对内容，在文档流（不会遮挡内容）；
为了说明上面那点，来一个代码：
<html>
<head>
<meta charset=utf-8"/>
<style>
.a{
width:500px;
height:150px;
background-color:green;
}
#b{
float:left;
width:50px;
height:50px;
background-color:#ccc;
}
#c{
width:50px;
height:100px;
background-color:#aaa;
}
</style>
</head>
<body>
<div class="a">
<div id="b">
ABC
</div>
<div id="c">
FEDCBA
</div>
</div>
</body>
</html>
b的高度是50px；c的高度是100px。在没有float的情况下，b和c的高度正好撑满了外面的div（因为div是块级元素，所以默认情况下他们不会同行显示）；
若完全脱离文档流，那么会导致b和c重叠，即无法看到c（把float改为position:absolute;）或者b（两个都加上position:absolute;）的内容。
然而，使用float的实际情况如图：
A挡住了B的一部分，但是并没有挡住B的内容（注意，是内容FEDCBA，而不是content区域）；
⑤所以可以利用float会使内容不会被遮挡的特性，来达成某些目的。
潜在问题：假设float元素在A块中，但由于其脱离文档流的特性，其高度／宽度不会被Ａ块所考虑。假设float元素的高度比A块要大，到了B块的范围内了。
会导致float元素覆盖B块的区域，B块的内容将避开该区域。
如图：
⑥解决占用后续元素位置空间的办法：
clear
值：
both、left、right、none（默认）、inherit（继承）
特点：
应用于float的后续元素＋块级元素；
方法一：
在float元素后，你想要清除浮动的地方，加一个块，然后给其附上clear:both的css属性。这里是一个加空块的示例：
HTML：<div class="clearfloat"></div>
CSS：
.clearfloat{
width:0;
clear:both;
overflow:hidden;
visibility:hidden;
}
举个例子，假设有A块和B块，然后A块有子块a1块和a2块（div）。而a1块是float元素。（注意，除a1块和B块之外，都没有设置高度）
正常情况下：a2块位于a1块右边（行级元素），a1块因为设置css样式时高度比较高，占用了B块的一部分（遮挡了部分B块的区域）；
《1》在a2块前加入这个标签，于是a2块出现在a1块的下方（浮动无效），A块的float元素没有遮挡B块，A块和B块的正常的相对位置。另外，a1块后a2块前，是属于A块的部分。
《2》在A块后加入这个标签，a2块依然位于a1块后面（浮动有效），但是B块不再被遮挡。另外，A块后，B块前有一部分，其属于A、B的父元素的区域。
《3》在a2块中加入这个标签（内容前和内容后两种情况），内容前则a2的内容在a1的下方，内容后则a2的内容在a1的右方。另外，这两种情况，a1块后都是a2块的部分。
总结：
也就是说，在 不设置 浮动元素的父元素、兄弟元素的 高度 情况下，其父元素、兄弟元素的高度，可以根据 clearfloat所在的标签 来 自适应 。
（注：若设置的话，则不能自适应）
附HTML代码，可以自己试试放在不同的情况。
<html>
<head>
<meta charset=utf-8"/>
<style>
.main{
width:500px;
height:200px;
background-color:#ddd;
}
.A{
width:100px;
background-color:blue;
outline:2px dashed blue;
}
.a1{
height:100px;
float:left;
background-color:#ccc;
}
.a2{
background-color:green;
}
.clearfloat {
content:".";
display:block;
height:0;
clear:both;
overflow:hidden;
visibility:hidden;
}
.B{
width:100px;
height:100px;
background-color:Yellow;
}
</style>
</head>
<body>
<div class="main">
<div class="A">
<div class="a1">
aaa
</div>
<div class="a2">
bbbb
<br class="clearfloat"/>
</div>
</div>
<div class="B">
ppp
</div>
</div>
</body>
</html>
方法二：
设置一个类class="clearfloat "，然后利用伪类选择器“:after”，来给该样式的块后面添加一个块级元素。当你想要清除某个块的float浮动时，给其添加一个clearfloat的class即可。
例如CSS样式：
.clearfloat:after{
content:".";
display:block;
height:0;
clear:both;
overflow:hidden;
visibility:hidden;
}
你想要清除A块之后的浮动（达成上面《2》的目的），在A块的标签class属性中，像这样<div class="A clearfloat">添加绿色字体部分即可。
如果想要达成上面《1》中的目的，那么在a2的样式中添加clear:both这条CSS属性即可。
注意，不知为何，在float元素中添加.clearfloat，然后利用其after是无效的。可能是因为after依然属于float元素吧。
总结：
也就是说，如果通过加样式的方法，若是想从哪个元素之后，float的浮动不生效，那么就在其的class加入上述代码（float元素本身不可加）。
若是从哪个元素开始，float浮动不生效，那么就把伪类选择器的after改为before，并在这个元素的class中加入clearfloat即可。
①float
②值：
left 向左浮动
right 向右浮动
③特点：
默认宽度——内容宽度（但可以通过width和height设置）；
脱离文档流（非完全脱离）；
向指定方向一直移动（根据值），移动到不能移动为止
④float的元素，在同一个文档流（所以同一个文档流中的float元素，不会重叠）；
float，对元素而言，脱离文档流；对内容，在文档流（不会遮挡内容）；
为了说明上面那点，来一个代码：
<html>
<head>
<meta charset=utf-8"/>
<style>
.a{
width:500px;
height:150px;
background-color:green;
}
#b{
float:left;
width:50px;
height:50px;
background-color:#ccc;
}
#c{
width:50px;
height:100px;
background-color:#aaa;
}
</style>
</head>
<body>
<div class="a">
<div id="b">
ABC
</div>
<div id="c">
FEDCBA
</div>
</div>
</body>
</html>
b的高度是50px；c的高度是100px。在没有float的情况下，b和c的高度正好撑满了外面的div（因为div是块级元素，所以默认情况下他们不会同行显示）；
若完全脱离文档流，那么会导致b和c重叠，即无法看到c（把float改为position:absolute;）或者b（两个都加上position:absolute;）的内容。
然而，使用float的实际情况如图：
A挡住了B的一部分，但是并没有挡住B的内容（注意，是内容FEDCBA，而不是content区域）；
⑤所以可以利用float会使内容不会被遮挡的特性，来达成某些目的。
潜在问题：假设float元素在A块中，但由于其脱离文档流的特性，其高度／宽度不会被Ａ块所考虑。假设float元素的高度比A块要大，到了B块的范围内了。
会导致float元素覆盖B块的区域，B块的内容将避开该区域。
如图：
⑥解决占用后续元素位置空间的办法：
clear
值：
both、left、right、none（默认）、inherit（继承）
特点：
应用于float的后续元素＋块级元素；
方法一：
在float元素后，你想要清除浮动的地方，加一个块，然后给其附上clear:both的css属性。这里是一个加空块的示例：
HTML：<div class="clearfloat"></div>
CSS：
.clearfloat{
width:0;
clear:both;
overflow:hidden;
visibility:hidden;
}
举个例子，假设有A块和B块，然后A块有子块a1块和a2块（div）。而a1块是float元素。（注意，除a1块和B块之外，都没有设置高度）
正常情况下：a2块位于a1块右边（行级元素），a1块因为设置css样式时高度比较高，占用了B块的一部分（遮挡了部分B块的区域）；
《1》在a2块前加入这个标签，于是a2块出现在a1块的下方（浮动无效），A块的float元素没有遮挡B块，A块和B块的正常的相对位置。另外，a1块后a2块前，是属于A块的部分。
《2》在A块后加入这个标签，a2块依然位于a1块后面（浮动有效），但是B块不再被遮挡。另外，A块后，B块前有一部分，其属于A、B的父元素的区域。
《3》在a2块中加入这个标签（内容前和内容后两种情况），内容前则a2的内容在a1的下方，内容后则a2的内容在a1的右方。另外，这两种情况，a1块后都是a2块的部分。
总结：
也就是说，在 不设置 浮动元素的父元素、兄弟元素的 高度 情况下，其父元素、兄弟元素的高度，可以根据 clearfloat所在的标签 来 自适应 。
（注：若设置的话，则不能自适应）
附HTML代码，可以自己试试放在不同的情况。
<html>
<head>
<meta charset=utf-8"/>
<style>
.main{
width:500px;
height:200px;
background-color:#ddd;
}
.A{
width:100px;
background-color:blue;
outline:2px dashed blue;
}
.a1{
height:100px;
float:left;
background-color:#ccc;
}
.a2{
background-color:green;
}
.clearfloat {
content:".";
display:block;
height:0;
clear:both;
overflow:hidden;
visibility:hidden;
}
.B{
width:100px;
height:100px;
background-color:Yellow;
}
</style>
</head>
<body>
<div class="main">
<div class="A">
<div class="a1">
aaa
</div>
<div class="a2">
bbbb
<br class="clearfloat"/>
</div>
</div>
<div class="B">
ppp
</div>
</div>
</body>
</html>
方法二：
设置一个类class="clearfloat "，然后利用伪类选择器“:after”，来给该样式的块后面添加一个块级元素。当你想要清除某个块的float浮动时，给其添加一个clearfloat的class即可。
例如CSS样式：
.clearfloat:after{
content:".";
display:block;
height:0;
clear:both;
overflow:hidden;
visibility:hidden;
}
你想要清除A块之后的浮动（达成上面《2》的目的），在A块的标签class属性中，像这样<div class="A clearfloat">添加绿色字体部分即可。
如果想要达成上面《1》中的目的，那么在a2的样式中添加clear:both这条CSS属性即可。
注意，不知为何，在float元素中添加.clearfloat，然后利用其after是无效的。可能是因为after依然属于float元素吧。
总结：
也就是说，如果通过加样式的方法，若是想从哪个元素之后，float的浮动不生效，那么就在其的class加入上述代码（float元素本身不可加）。
若是从哪个元素开始，float浮动不生效，那么就把伪类选择器的after改为before，并在这个元素的class中加入clearfloat即可。