• 面试官：请说说什么是BFC？大白话讲清楚

    BFC到底是什么东西

    BFC 全称：Block Formatting Context， 名为 "块级格式化上下文"。

    W3C官方解释为：BFC它决定了元素如何对其内容进行定位，以及与其它元素的关系和相互作用，当涉及到可视化布局时，Block Formatting Context提供了一个环境，HTML在这个环境中按照一定的规则进行布局。

    简单来说就是，BFC是一个完全独立的空间（布局环境），让空间里的子元素不会影响到外面的布局。那么怎么使用BFC呢，BFC可以看做是一个CSS元素属性

    怎样触发BFC

    这里简单列举几个触发BFC使用的CSS属性

    • overflow: hidden
    • display: inline-block
    • position: absolute
    • position: fixed
    • display: table-cell
    • display: flex

    BFC的规则

    • BFC就是一个块级元素，块级元素会在垂直方向一个接一个的排列
    • BFC就是页面中的一个隔离的独立容器，容器里的标签不会影响到外部标签
    • 垂直方向的距离由margin决定， 属于同一个BFC的两个相邻的标签外边距会发生重叠
    • 计算BFC的高度时，浮动元素也参与计算

    BFC解决了什么问题

    1.使用Float脱离文档流，高度塌陷

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>高度塌陷title>
    8.     <style>
    9.         .box {
    10.             margin: 100px;
    11.             width: 100px;
    12.             height: 100px;
    13.             background: red;
    14.             float: left;
    15.         }
    16.         .container {
    17.             background: #000;
    18.         }
    19.     style>
    20. head>
    21. <body>
    22.     <div class="container">
    23.         <div class="box">div>
    24.         <div class="box">div>
    25.     div>
    26. body>
    27. html>
    28. 复制代码

    效果：

    可以看到上面效果给box设置完float结果脱离文档流，使container高度没有被撑开，从而背景颜色没有颜色出来，解决此问题可以给container触发BFC，上面我们所说到的触发BFC属性都可以设置。

    修改代码

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>高度塌陷title>
    8.     <style>
    9.         .box {
    10.             margin: 100px;
    11.             width: 100px;
    12.             height: 100px;
    13.             background: red;
    14.             float: left;
    15.         }
    16.         .container {
    17.             background: #000;
    18.             display: inline-block;
    19.         }
    20.     style>
    21. head>
    22. <body>
    23.     <div class="container">
    24.         <div class="box">div>
    25.         <div class="box">div>
    26.     div>
    27. body>
    28. html>
    29. 复制代码

    效果：

    2.Margin边距重叠

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <style>
    9.         .box {
    10.             margin: 10px;
    11.             width: 100px;
    12.             height: 100px;
    13.             background: #000;
    14.         }
    15.     style>
    16. head>
    17. <body>
    18.     <div class="container">
    19.         <div class="box">div>
    20.         <div class="box">div>
    21.     div>
    22. body>
    23. html>
    24. 复制代码
    白话c++（绝对经典）
    application/x-rar 0星 超过10%的资源 1.16MB
    下载

    效果：

    可以看到上面我们为两个盒子的margin外边距设置的是10px，可结果显示两个盒子之间只有10px的距离，这就导致了margin塌陷问题，这时margin边距的结果为最大值，而不是合，为了解决此问题可以使用BFC规则（为元素包裹一个盒子形成一个完全独立的空间，做到里面元素不受外面布局影响），或者简单粗暴方法一个设置margin，一个设置padding。

    修改代码

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Margin边距重叠title>
    8.     <style>
    9.         .box {
    10.             margin: 10px;
    11.             width: 100px;
    12.             height: 100px;
    13.             background: #000;
    14.         }
    15.     style>
    16. head>
    17. <body>
    18.     <div class="container">
    19.         <div class="box">div>
    20.         <p><div class="box">div>p>
    21.     div>
    22. body>
    23. html>
    24. 复制代码

    效果：

    3.两栏布局

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>两栏布局title>
    8.     <style>
    9.             div {
    10.                  width: 200px;
    11.                  height: 100px;
    12.                  border: 1px solid red;
    13.             }
    14.  
    15.     style>
    16. head>
    17. <body>
    18.     <div style="float: left;">
    19.         两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局
    20.     div>
    21.     <div style="width: 300px;">
    22.         我是蛙人，如有帮助请点个赞叭，如有帮助请点个赞叭，如有帮助请点个赞叭，如有帮助请点个赞叭，如有帮助请点个赞叭，如有帮助请点个赞叭
    23.     div>
    24. body>
    25. html>
    26. 复制代码

    效果：

    密码破解程序密码破解程序密码破解程序
    application/msword 0星 超过10%的资源 345KB
    下载

    可以看到上面元素，第二个div元素为300px宽度，但是被第一个div元素设置Float脱离文档流给覆盖上去了，解决此方法我们可以把第二个div元素设置为一个BFC。

    修改代码

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>两栏布局title>
    8.     <style>
    9.             div {
    10.                  width: 200px;
    11.                  height: 100px;
    12.                  border: 1px solid red;
    13.             }
    14.  
    15.     style>
    16. head>
    17. <body>
    18.     <div style="float: left;">
    19.         两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局
    20.     div>
    21.     <div style="width: 300px;display:flex;">
    22.         我是蛙人，如有帮助请点个赞叭，如有帮助请点个赞叭，如有帮助请点个赞叭，如有帮助请点个赞叭，如有帮助请点个赞叭，如有帮助请点个赞叭
    23.     div>
    24. body>
    25. html>
    26. 复制代码

    效果：

    结语

    谢谢你读完本篇文章，希望对你能有所帮助，如有问题欢迎各位指正。整理的一些Java面试题可在】工众号【不脱发有志青年】

     

  • 相关阅读:
    map容器（20221125）
    【Redis 进阶】Redis 典型应用 —— 缓存（cache）
    Azkaban登录分析
    nodejs+vue+elementui+express外卖数据分析python
    C语言学习概览（六）
    【YOLO格式的数据标签，目标检测】
    浅谈并发容器
    （亲测完全可行）charles抓包夜神模拟器保姆级教程
    电子词典项目
    一文详解最大重复子串
  • 原文地址：https://blog.csdn.net/java_beautiful/article/details/126241667