关于前端:面试官最喜欢问的6种清除浮动和BFC

7次阅读

共计 3830 个字符，预计需要花费 10 分钟才能阅读完成。

前言

大家好，我是林三心，革除浮动 算是面试中 CSS 问的最多的一题了，当面试官问你 请你说说如何革除浮动 时，他必定不是想让你单纯地答出浮动的革除办法，而是想让你顺带答出BFC，就算他不想让你答出，你也要本人被动答出BFC，这样能力在泛滥面试者中怀才不遇嘛！嘿嘿！

浮动

1. 场景

当咱们想实现以上面成果时，咱们第一工夫必定会想到浮动float

  • flex：不应该是第一工夫想起我吗？
  • 我：不，我不想
  • flex：呵，男人

不多 BB，间接上代码

<div class="box">
        <div class="left"></div>
        <div class="right"></div>
</div>

.box {
            border: 1px solid black;
            padding: 5px;
            width: 450px;
      }
.left {
            width: 100px;
            height: 100px;
            background-color: red;
            float: left;
       }
.right {
            width: 100px;
            height: 100px;
            background-color: red;
            float: right;
       }

然而却失去这样的成果：

WTF!!! 怎么是这样呢？？？跟我想的不一样啊！！！这是为啥呢？？？

2. 寻找起因

起因是，浮动的元素会 脱离文档流 ，什么叫 脱离文档流 呢，举个例子，有一天你跟你老板说：“老子不想干了，世界那么大，我想去看看”，那从此以后，你老板就管不了你了。脱离文档流 同理，一个元素一旦浮动，就会脱离文档流，那么他的父元素也管不了他了，布局也会往前推动，所以才呈现了下面 父元素高度坍塌 的景象。

革除浮动

想要解决下面的问题，那就要采取所有伎俩了，也就是面试官通常会问的，说一说你平时如何革除浮动的，这时候必定是答得越多种越好，嘿嘿！！

1. 将父级也设置成浮动

.box {
            border: 1px solid black;
            padding: 5px;
            width: 450px;
            float: left
      }

毛病：这种办法必定是弊大于利，想想都晓得，父级设置成浮动了，那爷爷级必定又会受影响，又得解决爷爷级的高度坍塌，这不是有限套娃吗？？

2. 给父级减少定位 absolute

.box {
            border: 1px solid black;
            padding: 5px;
            width: 450px;
            height: 100px
      }

毛病：position:absolute也会 脱离文档流 啊，影响了整体布局，这不是给本人找罪受吗？

3. 给父级设置overflow:hidden

.box {
            border: 1px solid black;
            padding: 5px;
            width: 450px;
            overflow:hidden
      }

毛病：当文本过长，且蕴含过长英文时，会呈现英文文本被暗藏的状况

<div class="box">
        <div class="left"></div>
        <div class="right"></div>
        <div> 林三心林三心林三心林三心林三心林三心林三心林三心林三心林三心林三心林林三心林林三心林林三心林林三心林林三心林林三心林林三心林林三心林林三心林林三心林林 sunshine_Linsunshine_Linsunshine_Linsunshine_Linsunshine_Linsunshine_Linsunshine_Linsunshine_Linsunshine_Linsunshine_Linsunshine_Lin 心林林三心 </div>
</div>

4. 给父级设置对应的高度

.box {
            border: 1px solid black;
            padding: 5px;
            width: 450px;
            height: 100px
      }

毛病：如果浮动元素是 定宽 的，那还好，如果是 不定宽 的，那这种形式就很不灵便了，有可能明天是 100px，今天是 200px，先天是 300px，那你不是得累死？

5. 开端减少空元素进行 clear

对于clear：


所以这里 bottomDiv 设置成clear:both，代表了它左右都不能有浮动元素，这迫使了他往下挪动，进而撑开了父级盒子的高度。

<div class="box">
        <div class="left"></div>
        <div class="right"></div>
        <div class="bottomDiv"></div>
</div>

.bottomDiv {clear: both;}

毛病：很显著，减少了一个 div 标签，减少了页面的 渲染累赘（尽管我感觉应该影响不大吧）

6. 给父级增加伪元素进行 clear

这种办法就是用 伪元素 代替了下面的 div 标签，大家都晓得，伪元素是不会被渲染进去的，所以也很好的补救了上一种办法的毛病。

.box::after {
            content: '.';
            height: 0;
            display: block;
            clear: both;
        }

毛病：哎呀，别求全责备啦！！！这个应该是目前最优解了吧。我是找不出毛病，欢送大佬们提供毛病。

聊聊 BFC

1. 官网解释

块格式化上下文（Block Formatting Context，BFC）是 Web 页面的可视 CSS 渲染的一部分，是块盒子的布局过程产生的区域，也是浮动元素与其余元素交互的区域。浏览器对 BFC 的限度规定是：

  • 1. 生成 BFC 元素的子元素会一个接一个的搁置。
  • 2. 垂直方向上他们的终点是一个蕴含块的顶部，两个相邻子元素之间的垂直距离取决于元素的 margin 个性。在 BFC– 中相邻的块级元素的外边距会折叠(Mastering margin collapsing)。
  • 3. 生成 BFC 元素的子元素中，每一个子元素左外边距与蕴含块的左边界相接触（对于从右到左的格式化，右外边距接触右边界），即便浮动元素也是如此（只管子元素的内容区域会因为浮动而压缩），除非这个子元素也创立了一个新的 BFC（如它本身也是一个浮动元素）。
    这是 MDN 上的官网解释。(⊙o⊙)…，的确挺官网的。

2. 触发条件

  • 根元素，即 HTML 标签
  • 浮动元素：float值为left、right
  • overflow值不为 visible，为 auto、scroll、hidden
  • display值为 inline-block、table-cell、table-caption、table、inline-table、flex、inline-flex、- - grid、inline-grid
  • 定位元素：position值为 absolute、fixed

3. 集体了解

  • 1. 外部的 Box 会在垂直方向上一个接一个的搁置
  • 2. 外部的 Box 垂直方向上的间隔由 margin 决定。（残缺的说法是：属于同一个 BFC 的两个相邻 Box 的 margin 会产生折叠，不同 BFC 不会产生折叠。）
  • 3. 每个元素的左外边距与蕴含块的左边界相接触（从左向右），即便浮动元素也是如此。（这阐明 BFC 中子元素不会超出他的蕴含块，而 position 为 absolute 的元素能够超出他的蕴含块边界）
  • 4.BFC 的区域不会与 float 的元素区域重叠
  • 5. 计算 BFC 的高度时，浮动子元素也参加计算
    第1点和第 3 点就不用说了，大家都懂，上面就来着重说说第 2，4，5 点吧！

4. 解决 margin 重叠问题

如果我想要两个盒子之间间隔 20px，我这么写：

<div class="box2"></div>
<div class="box3"></div>

.box2 {
            margin-bottom: 10px;
            width: 100px;
            height: 100px;
            background-color: red;
        }

.box3 {
            margin-top: 10px;
            width: 100px;
            height: 100px;
            background-color: red;
        }

后果发现，并没有达到预期，两个盒子的 margin 重叠了：

怎么解决呢？依据 集体了解 里的 第 2 点 可知：两个不同 BFC 环境 的盒子，他们两的 margin 才不会重叠，那么咱们只需触发 box3 的 BFC 就行

.box3 {
            margin-bottom: 10px;
            width: 100px;
            height: 100px;
            background-color: red;
            float: left;
        }

这就实现了两个盒子中键距离 20px 了

5. 浮动元素与 BFC 盒子不重叠

还是看例子：

<div class="box2 w"></div>
<div class="box3 w"></div>

.w {
        width: 100px;
        height: 100px;
    }

.box2 {
        float: left; // 触发 BFC
        background: red;
    }

.box3 {background: green;}

后果是，因为红色盒子浮动脱离文档流，导致绿色盒子向前推动，导致红色盒子盖住了绿色盒子

怎么解决呢？依据 集体了解 里的 第 4 点 可知：float 盒子 与BFC 盒子 不重叠，所以咱们只须要把绿色盒子设置为 BFC 盒子 就行

.box3 {
        background: green;
        overflow:hidden // 触发 BFC
    }

成果：

6. 利用 BFC 革除浮动

依据 集体了解 里的 第 5 点 可知：BFC 盒子 会把外部的 float 盒子 算进高度中，这也是为什么后面能够通过给父级盒子设置 float: left position: absolute overflow: hidden 来解决浮动的高度塌陷问题，因为这些做法都使父级盒子变成一个 BFC 盒子，而BFC 盒子 会把外部的 float 盒子 算进高度，趁势解决了高度塌陷问题

结语！

我是林三心，一个热心的前端菜鸟程序员。如果你上进，喜爱前端，想学习前端，那咱们能够交朋友，一起摸鱼哈哈，摸鱼群，加我请备注【思否】

正文完
前端
发表至： 前端
2022-01-05
 0
关于前端:嘿想不想和闪亮的中国星来一场浪漫的约会
关于前端:tailwindcss-系列-Flex-Column
关于前端:技术管理之路之2021年终总结
关于前端:前端百题斩010通俗易懂的JavaScript执行上下文

站内搜索

-「」