CSS核心（三十七）float浮动的注意事项--浮动的子元素不能撑开父元素的高度
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>float浮动的注意事项--浮动的子元素不能撑开父元素的高度</title>
</head>
<style>
.box{
width:900px;
background:#f00;
height:100px;
}
.box div{
width:100px;
height:100px;
float:left;
}
.s1{
background:pink;
}
.s2{
background:#00f;
}
.s3{
background:#ff0;
}
.box1{
width:900px;
height:200px;
background:#0f0;
}
</style>
<body>
<div class="box">
<div class="s1"></div>
<div class="s2"></div>
<div class="s3"></div>
</div>
<div class="box1"></div>
</body>
</html>
显示结果如下：
解释一下：
以上代码中，我们给第一个父级div中的三个子级div设置了左浮动，浮动后父级div中的三个子级div的高度超过了父元素div，即，无法撑开父元素的高度。
下面的第二个div与第一个父级div是同级元素，它依然位于第一个父级div的下方。
float浮动的元素高度也不会占用下方元素的空间，它们是浮起来的，即：脱离了标准流，在标准流的上层。
经历过的是最有价值的能让它与别人分享更好 verygood，我也想成为一名高手，希望各位指教指教，嘻嘻。 路漫漫其修远兮，吾将上下而求索 很不错，看了让我感触很深，让我知道了自己的弱点，和高手的差距，促使我学习,学习,再学习。 值得深思 很不错的文章！ 谢谢共享！让我受用无穷！再次谢谢你！！ 成功/对我来说，，成功就是一个新的起点，，什么叫成功，我才刚上路咧引用发哥的话，。无论什么时候，我们都要想的是一个新的起点，这样我们才不会满足现状，目标也会更清晰现在的我自信心越来越膨胀，我感觉有种云里雾里的感觉可能得来太容易了，我发现我太狂了，言不由衷。 我看了你写的这些真的对我影响很大，虽然我还是一个学生，还没有进入社会，但要相信天外有天，人外有人，永远不要认为自己已经学好了