非完全脱离文档流
左右结构div盒子重叠现象，一般是由于相邻两个DIV一个使用浮动一个没有使用浮动。一个使用浮动一个没有导致DIV不是在同个“平面”上，但内容不会造成覆盖现象，只有DIV形成覆盖现象。
<!DOCTYPE html>
<html lang="en">
<head>
???<meta charset="UTF-8">
???<title>Title</title>
???<style>
???????*{
???????????margin: 0;
???????}
???????.r1{
???????????width: 100px;
???????????height: 100px;
???????????background-color: #7A77C8;
???????????float: left;
???????}
???????.r2{
???????????width: 200px;
???????????height: 200px;
???????????background-color: wheat;
???????}
???</style>
</head>
<body>
<div class="r1"></div>
<div class="r2">region2</div>
</body>
</html>
两个DIV，一个脱离文档流，一个没有，导致DIV不在同一“平面”上，但内容上不会被覆盖的；
css之float之非完全脱离文档流
原文地址：https://www.cnblogs.com/xiaotianxiedaima/p/9121510.html