一、什么是浮动
float是css样式中的定位属性，用于设置标签对象（如：<div>标签盒子、<span>标签、<a>标签、<em>标签等html标签）的浮动布局，浮动也就是我们所说标签对象浮动居左靠左（float:left）和浮动居右靠右(float:right)。
如下示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box01{
width: 600px;
height: 600px;
border: 2px solid red;
}
img{
width: 200px;
height: 300px;
float: left;
}
</style>
</head>
<body>
<div class="box01">
<img src="./img/01.jpg">
<span>Gitee 拥有全面的开源项目分类和推荐，帮助你迅速找到有价值的开源项目并参与其中。现在就创建仓库或探索 Gitee，开启你的开源之旅Gitee 拥有全面的开源项目分类和推荐，帮助你迅速找到有价值的开源项目并参与其中。现在就创建仓库或探索 Gitee，开启你的开源之旅Gitee 拥有全面的开源项目分类和推荐，帮助你迅速找到有价值的开源项目并参与其中。现在就创建仓库或探索 Gitee，开启你的开源之旅Gitee 拥有全面的开源项目分类和推荐，帮助你迅速找到有价值的开源项目并参与其中。现在就创建仓库或探索 Gitee，开启你的开源之旅Gitee 拥有全面的开源项目分类和推荐，帮助你迅速找到有价值的开源项目并参与其中。现在就创建仓库或探索 Gitee，开启你的开源之旅Gitee 拥有全面的开源项目分类和推荐，帮助你迅速找到有价值的开源项目并参与其中。现在就创建仓库或探索 Gitee，开启你的开源之旅Gitee 拥有全面的开源项目分类和推荐，帮助你迅速找到有价值的开源项目并参与其中。现在就创建仓库或探索 Gitee，开启你的开源之旅Gitee 拥有全面的开源项目分类和推荐，帮助你迅速找到有价值的开源项目并参与其中。现在就创建仓库或探索 Gitee，开启你的开源之旅Gitee 拥有全面的开源项目分类和推荐，帮助你迅速找到有价值的开源项目并参与其中。现在就创建仓库或探索 Gitee，开启你的开源之旅Gitee 拥有全面的开源项目分类和推荐，帮助你迅速找到有价值的开源项目并参与其中。现在就创建仓库或探索 Gitee，开启你的开源之旅Gitee 拥有全面的开源项目分类和推荐，帮助你迅速找到有价值的开源项目并参与其中。</span>
</div>
</body>
</html>二、为什么会导致脱离文档流
CSS中脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。
（需要注意的是，使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围）
而对于使用absolute positioning脱离文档流的元素，其他盒子与其他盒子内的文本都会无视它。
解决办法如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 500px;
border: 1px solid orange;
}
.son01{
width: 100px;
height: 100px;
background-color: palevioletred;
float: left;
}
.son02{
width: 100px;
height: 100px;
background-color: aqua;
float: right;
}
/*
当元素浮动的时候 旁边元素布局时会忽略它
*/
</style>
</head>
<body>
<div class="box">
<div class="son01">son01</div>
<div class="son02">son02</div>
</div>
</body>
</html>三、浮动塌陷是什么
当元素设置浮动而父元素的宽高没有设置时，高度会塌缩为0。
解决办法如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
border: 1px solid red;
height: 100px;
/*
bfc block format content 块级格式化文档
如何触发 bfc
overflow: hidden / scroll
*/
/* overflow: hidden; */
}
.son01{
width: 100px;
height: 100px;
background-color: pink;
float: left;
}
</style>
</head>
<body>
<!--
浮动导致的高度塌陷
修改这个问题：
1. 给父亲设置一个高度（不推荐）
2. 触发 bfc
3. 清除浮动
-->
<div class="box">
<div class="son01"></div>
<div style="clear: both;"></div>
<!-- 专门用一个div来清除浮动 -->
<p>iewfkfdfvmdfjaiofsdvsdkjodfjdklcnsdl</p>
</div>
</body>
</html>综上：解决浮动塌陷有三个方法：
1. 给父亲设置一个高度（不推荐）
2. 触发 bfc
3. 清除浮动
扫描二维码关注公众号，回复：
15538987 查看本文章
