CSS核心（三十八）清除浮动带来的影响--让浮动元素使用标准流的特性
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>清除浮动带来的影响--让浮动元素使用标准流的特性</title>
</head>
<style>
.box{
width:400px;
background:#f00;
/* 方法三 给父元素设置overflow:auto; */
/* overflow:auto; */
}
.box div{
width:100px;
height:200px;
float:left;
}
.s1{
background:pink;
}
.s2{
background:#00f;
}
.s3{
background:#ff0;
}
.laowang{
width:350px;
height:200px;
background:#0f0;
}
/* 方法一、在浮动元素的父级元素下方写一个空div，然后设置样式为clear:both; */
/*.clear{
clear:both;
}*/
/* 方法二、使用伪元素清除浮动（推荐） */
.box:after{
content:"";
display:block;
clear:both;
}
</style>
<body>
<div class="box">
<div class="s1"></div>
<div class="s2"></div>
<div class="s3"></div>
</div>
<!-- <div class="clear"></div><!-- 清除浮动带来影响的空标签必须是一个块元素 -->
<div class="laowang"></div>
</body>
</html>
解释一下：
以上代码中，我们给父级元素div下的3个子级元素div设置了左浮动，此时，由于这三个子级div已经脱离了标准流，所以不占用标准流的空间。
如果不做处理，显示结果应该如下图所示：
在代码中我们使用了三种方式让浮动的元素占用标准流的空间。
1、在浮动元素的父级元素下方写一个空div，然后设置样式为clear:both;
2、使用伪元素清除浮动（推荐）
3、给父元素设置overflow:auto;
以上任意一种方法设置后的结果都如下图所示：
真的不错，佩服佩服！ 三人行，必有我师 受益非浅，相见恨晚！首先，祝楼主和所有论坛的朋友新年快乐！！！其次，谢谢楼主和我们分享你的经验！！！其实经验也是一种财富！！！谢谢你把你的财富与我们共享！！！看了这篇文章感触颇多！！！其中两点最为深刻！！！1.应聘不成功，只能说明我们不够好！！正应为我们不够好，所以我们必须更加努力！！2.要正视自己，端正自己的目的，不断从自身寻找问题，解决问题！！！我也觉得还是应该学会写，然后才去解决优化的问题顶,学习永远都是无止境的,看来大家都要努力了!! 无语 恩，有所感悟哦，我现在也在学编程，由于我不是计算机专业的，但我会继续一如既往的学下去的 哦，从头开始哦，我相信自己。希望你们以后会指点指点哦 值得深思 任重道远啊~~~~~ 很好啊 很受感动 学海无涯啊 我现在 刚刚 高中 毕业 现在 自学 VB 我要坚持