高度塌陷问题及解决

什么情况下产生 (when

父盒子没有定义高度,但是子元素有高度,希望用子盒子撑起父盒子的高度,但是子盒子添加了浮动属性之后,父盒子高度为0

js 复制代码
<template>
  <div class="father">
    <div class="son">rr</div>
  </div>
</template>

<script setup></script>
<style lang="scss" scoped>
  .father {
    --left-width: 200px;

    border: 1px solid blue;
    .son {
      float: left;
      width: 60px;
      height: 200px;
      background-color: red;
    }
  }
</style>

为什么高度塌陷了 (why

子盒子添加浮动属性,脱离了文档流,不再占据位置,所以不能撑起父盒子,所以父盒子高度塌陷了

怎么解决 (how

法1:给父盒子添加固定高度

缺点:不能自适应高度,灵活性不好

法2:子盒子结尾添加空div并clear:both

left:清除左侧浮动元素对当前元素的影响

right:清除右侧浮动元素对当前元素的影响

both:清除两侧中最大影响的那侧
clear: both

js 复制代码
<template>
  <div class="father">
    <div class="son">rr</div>
    <!-- 添加空的div,并 clear: both-->
    <div style="clear: both"></div> 
  </div>
</template>

<script setup></script>
<style lang="scss" scoped>
  .father {
    --left-width: 200px;

    border: 1px solid blue;
    .son {
      float: left;
      width: 60px;
      height: 200px;
      background-color: red;
    }
  }
</style>

法3:给父元素设置伪元,并设置清除浮动的样式

给塌陷的父盒子添加
::after { display: block; clear: both; content: ''; }

js 复制代码
<template>
  <div class="father">
    <div class="son">rr</div>
  </div>
</template>

<script setup></script>
<style lang="scss" scoped>
  .father {
    --left-width: 200px;

    border: 1px solid blue;
    &::after {
      display: block;
      clear: both;
      content: '';
    }
    .son {
      float: left;
      width: 60px;
      height: 200px;
      background-color: red;
    }
  }
</style>

法4:添加BFC

  1. position:absolute;
  2. position: fixed;
  3. float:left;
  4. 具有overflow 且值不是 visible 的块元素,例如overflow:hidden;
  5. display: flow-root;
  6. 内联块 (元素具有 display: inline-block)
  7. display:flex
  8. display: inline-flex ;
相关推荐
SamHou08 小时前
手把手 CSS 盒子模型——从零开始的奶奶级 Web 开发教程2
前端·css·web
kooboo china.10 小时前
Tailwind CSS 实战:基于 Kooboo 构建 AI 对话框页面(八):异步处理逻辑详解
前端·css·人工智能·编辑器·html·交互
菜鸟小九12 小时前
html、css(javaweb第一天)
前端·css·html
Amctwd14 小时前
【HTML】HTML 与 CSS 基础教程
前端·css·html
iam15 小时前
使用 CSS 实现 iOS 26 液态玻璃(Frosted Glass)效果
css
火车叼位15 小时前
理解 CSS Layer样式管理
css
小桥风满袖16 小时前
Three.js-硬要自学系列30之专项学习环境光
前端·css·three.js
小公主17 小时前
用原生 JavaScript 写了一个电影搜索网站,体验拉满🔥
前端·javascript·css
海底火旺18 小时前
电影应用开发:从代码细节到用户体验优化
前端·css·html
我是小七呦19 小时前
🔥Unocss为什么突然火了
前端·css·前端框架