前端_清除浮动相关问题

我来C咯

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

阅读量176

点赞数 1

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

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

本文链接：https://blog.csdn.net/weixin_46874084/article/details/123054095

版权

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

21 篇文章 2 订阅

订阅专栏

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

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;
    }

结果