为什么在css上应用浮动时div元素会被挤压？

在CSS中应用浮动时，div元素会被挤压的原因是浮动元素会脱离正常的文档流，导致其他非浮动元素不再考虑浮动元素的位置和尺寸，从而导致布局错乱。

具体来说，当一个元素设置了浮动属性（如float: left;或float: right;），它会尽量向左或向右浮动，直到遇到父元素的边界或其他浮动元素。当浮动元素的宽度超过父元素的宽度时，父元素会发生塌陷，即父元素的高度会变为0，导致其他内容被挤压。

为了解决这个问题，可以使用清除浮动的技术，常见的方法有：

1. 使用clear属性：在浮动元素的下方添加一个空的div，并设置clear属性为both，例如：

<div style="clear: both;"></div>

这样可以清除浮动元素对后续元素的影响。

1. 使用clearfix类：在CSS中定义clearfix类，将其应用于包含浮动元素的父元素，例如：

<style>
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}
</style>

<div class="clearfix">
  <!-- 浮动元素 -->
</div>

这样可以通过伪元素::after清除浮动元素对父元素的影响。

1. 使用overflow属性：在包含浮动元素的父元素上设置overflow属性为auto或hidden，例如：

<div style="overflow: auto;">
  <!-- 浮动元素 -->
</div>

这样可以触发BFC（块级格式化上下文），从而清除浮动元素对父元素的影响。

以上是解决浮动元素挤压div元素的常见方法，根据具体情况选择适合的方法即可。

腾讯云相关产品和产品介绍链接地址：

• 腾讯云产品：https://cloud.tencent.com/product
• 云服务器（CVM）：https://cloud.tencent.com/product/cvm
• 云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
• 云数据库 MySQL 版（CMYSQL）：https://cloud.tencent.com/product/cdb_mysql
• 云存储（COS）：https://cloud.tencent.com/product/cos
• 人工智能（AI）：https://cloud.tencent.com/product/ai_services
• 物联网（IoT）：https://cloud.tencent.com/product/iot_explorer
• 移动开发（移动推送）：https://cloud.tencent.com/product/umeng_push
• 区块链（BCS）：https://cloud.tencent.com/product/bcs
• 元宇宙（Tencent XR）：https://cloud.tencent.com/product/xr