浮动塌陷问题解决方法是什么？

文档流中父元素高度是由子元素撑起的,当我们为子元素添加浮动后,子元素脱离文档流,无法撑起父元素,导致父元素高度塌陷

<body>
  <div class="box1">
    <div class="box2"></div>
  </div>
</body>
复制代码
  <style>
    .box1 {
      width: 200px;
      border: 2px solid black;
    }

    .box2 {
      width: 100px;
      height: 100px;
      background-color: aqua;
      /* float: left; */
    }
  </style>
复制代码

复制代码
  <style>
    .box1 {
      width: 200px;
      border: 2px solid black;
    }

    .box2 {
      width: 100px;
      height: 100px;
      background-color: aqua;
      float: left;
    }
  </style>
复制代码

 

 解决方法

开启BFC;开启BFC后

  • 父元素的垂直外边距不会和子元素重叠
  • 开启BFC的元素不会被浮动元素覆盖
  • 开启BFC的元素可以包含浮动元素

开启BFC方法:

  • 给父元素设置高度(把父元素高度写死,就不能随着子元素自动调节)
  • 给父元素也添加浮动(会使父元素宽度的丢失,使其脱离文档流,导致下面的元素上移)
  • 给父元素添加display:inline-block(会使父元素丢失宽度)
  • overflow

   overflow: hidden;可能带来不可见问题

   overflow: auto;溢出显示滚动条

在浮动元素后添加元素设置clear属性

<body>
  <div class="box1">
    <div class="box2"></div>
    <div class="clear"></div>
  </div>
</body>
复制代码
  <style>
    .box1 {
      width: 200px;
      border: 2px solid black;
    }

    .box2 {
      width: 100px;
      height: 100px;
      background-color: aqua;
      float: left;
    }

    .clear {
      clear: both;
    }
  </style>
复制代码

br元素的clear属性

<body>
  <div class="box1">
    <div class="box2"></div>
    <br clear="all">
  </div>
</body>

after伪类(最推荐的)

可以通过after伪类向元素的最后添加一个空白的块元素，然后对其清除浮动，和第二种方法原理相同，可达到相同的效果，而且不会在页面中添加多余的div，这是最推荐的方式，几乎没有副作用

复制代码
  <style>
    .box1 {
      width: 200px;
      border: 2px solid black;
    }

    .box2 {
      width: 100px;
      height: 100px;
      background-color: aqua;
      float: left;
    }

    .box1:after {
      clear: both;
      content: "";
      display: block;
    }
  </style>
复制代码

 

posted @   天青色等烟雨灬  阅读(112)  评论(0)  编辑  收藏  举报
（评论功能已被禁用）
相关博文：
·  BFC、IFC是什么
·  说一说事件冒泡，事件捕获,事件委托
·  浮动高度塌陷问题
·  解决高度塌陷的方法
·  何为高度塌陷，如何解决?
阅读排行：
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 25岁的心里话
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
点击右上角即可分享
微信分享提示