前端_清除浮动相关问题

我来C咯

已于 2022-02-21 22:57:12 修改

阅读量216

点赞数 1

分类专栏：前端面试题文章标签：前端

于 2022-02-21 22:56:16 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_46874084/article/details/123054095

版权

前端面试题专栏收录该内容

21 篇文章

订阅专栏

本文探讨了当子元素设置浮动后导致父元素高度坍塌的问题，并提供了多种解决方案，包括使用clearfix类、BFC（块格式化上下文）以及绝对定位等方法，以确保父元素能正确包裹浮动的子元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

子元素设置浮动，导致没有设置高度的父元素坍塌。

html部分

  <div class="father">
    <div class="son"></div>
  </div>

css部分

    .father {
      width: 200px;
      border: 1px solid #000;
    }
    .son {
      float: left;
      width: 100px;
      height: 100px;
      background-color: lightcoral;
    }

结果

子元素不设置浮动

解决子元素设置浮动给父元素带来的问题

html部分

  <div class="father clearfix">
    <div class="son"></div>
  </div>

css部分

    .clearfix::after {
      content: '';
      display: block;
      clear: both;
    }
    .father {
      /* 使用BFC */
      /* overflow: hidden; */
      /* float: left; */
      /* position: absolute; */
      width: 200px;
      /* height: 100px; */
      border: 1px solid #000;
    }
    .son {
      float: left;
      width: 100px;
      height: 100px;
      background-color: lightcoral;
    }

结果