本文介绍了CSS中的浮动概念及其对文档流的影响，通过实例展示了浮动元素如何导致父元素塌陷。接着，详细讲解了解决父元素塌陷的五种方法，包括设置浮动、指定高度、添加额外元素、使用伪类以及应用BFC（块级格式化上下文）。这些方法为理解和处理浮动布局中的常见问题提供了实用技巧。
学习浮动首先我们要先清楚一个概念——文档流。那么什么是文档流呢？
文档流是文档中可显示对象在排列时所占用的位置。简单来说就是从头到尾按照文档的顺序，该在什么位置就在什么位置，也可以按照上面的意思理解，自上而下，自左到右的顺序。
而今天学习的float就是使得元素脱离文档流从而达到我们想要的效果的方法之一。
一、浮动
首先先来一个正常的文档流：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.mydiv{
background: skyblue;
}
.div1{
width: 200px;
height: 200px;
background: red;
}
.div2{
width: 200px;
height: 200px;
background: yellow;
}
.div3{
width: 200px;
height: 200px;
background: green;
}
</style>
</head>
<body>
<div class="mydiv">
最低0.47元/天 解锁文章
5017
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
