在面试中考察css的时候面试官可能会让你聊一聊浮动,那么接下来我们将总结css中浮动的常见的问题
浮动的特点
- 文字环绕效果 ：通过设置
float属性，我们可以轻松实现图文混排，让文字围绕在浮动元素周围，增强了页面设计的灵活性和可读性。
- 脱离文档流：当一个元素浮动后，它将不再遵循正常的文档流顺序排列，而是移动到其所在容器边缘，并尽可能向左或向右浮动。原本在其下方的内容会向上填充该元素原先在文档流中的位置。 参考下方例子,使用浮动之后span标签盖住了div标签
- 赋予行内元素尺寸控制权 ：通常情况下，行内元素（如
<span>）不能直接设置宽度和高度。然而，一旦设置了浮动，这些元素就具有了类似块级元素的特性，允许开发者为其设定明确的宽高尺寸。
为span标签设置宽高但是检查发现宽高失效
使用浮动:
我们可以看到上述的span标签的宽高生效,并且将div容器给盖住了
缺点
尽管浮动功能强大，但它的一个显著副作用就是可能导致后续元素布局的混乱：
后续元素布局错乱：由于浮动元素脱离了文档流，紧随其后的元素可能会填补浮动元素腾出的空间，进而破坏原有的布局结构，尤其是在未正确处理浮动闭合的情况下。
消除浮动
为了克服上述布局难题，有几种常见的清除浮动技术，其中一种是通过使用伪元素来清除浮动，另外一种则是利用Block Formatting Context（BFC）容器来包容浮动元素并恢复有序布局。
清除浮动的传统手段
- 增加额外标签清除浮动 :在浮动元素之后增加一个空元素,设置
clear:both,这样后面的元素便不会受到浮动的影响,或者给其伪元素设置样式 - 直接设置父容器尺寸：如果情况允许，也可以简单地为浮动元素的父容器设置固定的宽高，但这并不总是最佳解决方案，因为它无法自适应内容的变化。
利用BFC容器
BFC（Block Formatting Context）是一种特殊的布局环境，在此环境下，内部元素的行为更易于预测和控制。以下是BFC的特点：
- 内部元素垂直堆叠：BFC内的子元素将会彼此垂直对齐，不相互重叠。
- 边距重叠限制 ：在同一BFC中的相邻块级元素，其垂直边距不会与外部元素合并，避免了常见的边距合并问题。点击查看边距重叠问题
- 防止元素被浮动元素覆盖：BFC有助于保持布局稳定性，防止非浮动元素被浮动元素所覆盖。
- 计算高度时包含浮动元素：BFC在计算自身高度时会把浮动元素的高度考虑进去，保证了容器的高度能够正确反映内容的高度。
创建BFC容器的方法
创建一个BFC容器可以通过以下途径实现：
- 设置
overflow属性 ：将容器的overflow属性设为auto、hidden或scroll，这会使浏览器自动为该容器创建一个新的BFC。
css
.container {
overflow: auto; /* 或 hidden、scroll */
}- 更改
display属性 ：将容器的display属性设置为inline-block、table-cell、flex或inline-flex其中之一，同样能触发BFC的创建。
css
.container {
display: inline-block; /* 或 table-cell、flex、inline-flex */
}-
设置浮动 ：虽然不是理想的创建BFC场景，但将元素设置为浮动（即
float属性不为none）也能形成新的BFC。 -
利用伪元素创建BFC并清除浮动：在父容器后添加伪元素，并通过特定样式使其成为BFC的同时清除浮动。
css
.parent:after{
/* 设置添加子元素的内容是空 */
content: '';
/* 设置添加子元素为块级元素 */
display: block;
/* 设置添加的子元素的高度0 */
height: 0;
/* 设置添加子元素看不见 */
visibility: hidden;
/* 设置clear：both */
clear: both;
}浮动总结
特点:
- 实现文字环绕效果
- 能够让行内元素设置宽高
- 能够使元素脱离文档流,而之前占据的空间将会被其他元素占据
缺点: 造成后面的布局错乱,增加布局的难度
清除浮动的影响:
- 为父容器设置宽高,如果条件允许
- 增加额外的元素在浮动元素最后面,并设置
clear:both;,或者是在其伪元素:after设置样式 - 将父容器变为bfc容器
- 父容器属性
overflow为atuo,scroll,hidden - 设置父容器浮动
- 给父容器的伪类
:after设置样式 - 父容器
display的值设置为inline-flex,flex,table-cell,inline-block其中一个
- 父容器属性
BFC容器特点:
- 没有边距重叠问题
- 浮动元素不会遮住其它元素,并将其高度计算在内
本人还在学习中，水平有限，文章可能存在纰漏或错误，如有问题欢迎指正，感谢你阅读这篇文章，如果你觉得写得还行的话，不要忘记点赞、评论、收藏哦！祝事业有成,生活愉快！😘
