css浮动（float）

浮动（Float） 在CSS中是一个重要的布局技术，它允许元素向左或向右移动，其周围的元素会重新排列。当一个元素被设置为浮动时，它会脱离正常的文档流，这意味着它不再占据原本在文档流中的空间，而会尽可能地向左或向右移动，直到遇到父级元素的边界或其他浮动元素。

用途： 文本环绕图片，控制元素的对齐，创造多列布局
举例：文本环绕图片

<div class="a"><div class="b">float</div>这是一段文字描述This is a text description这是一段文字描述
</div> -->
<style>.a{width: 200px;height: 130px;border: 1px solid orange; }.b{width: 80px;height: 70px;background-color: red;border: 10px solid yellow;float: left;}
</style>

未设置浮动时：

如图所示：
在这里插入图片描述

设置浮动后：

如图所示：
在这里插入图片描述

带来的问题

<div class="container"><div class="float-item">浮动元素</div><div class="float-item">浮动元素</div><!--<div style="clear:both;">额外标签法</div>--!><div class="non-float-item">非浮动元素</div>
</div>
<style>.container {width: 200px;border: 1px solid orange;/* display:flow-root   *//* overflow: hidden; */}/* 添加伪元素清除浮动 *//* .container::after {content: "";display: table;clear: both;} */.float-item {float: left;width: 80px;height: 70px;background-color: red;border: 10px solid yellow;}.non-float-item {width: 80px;height: 70px;background-color: blue;}
</style>

问题1： 相邻元素重叠：因为它们不再占据文档流中的空间，所以相邻的非浮动元素会与之重叠
如图所示：
在这里插入图片描述

问题2： 父级元素高度塌陷(内部高度为0)
如图所示：
在这里插入图片描述
正常不设置浮动的样子：

解决方案：

1.使用空标签清除浮动： 在浮动元素后添加一个空标签（如“<div style="clear:both;"></div>”），并设置clear:both;clear CSS 属性指定一个元素是否必须移动 (清除浮动后) 到在它之前的浮动元素下面（相应值有：none，left，right，both）。clear 属性适用于浮动和非浮动元素。
优点： 简单易懂，书写方便，不会破坏文档结构。
缺点：