【Web前端基础】bfc的实际应用有什么

2020-12-03 11:18发布

站内问答 / Web前端
3229 9 9
发送
9条回答
水默
2楼 · 2020-12-03 11:35

margin重叠

bfc解决子元素float包含不了

bfc解决图片环绕p标签


天天
3楼 · 2020-12-03 15:59

一般来说，BFC的常见用途有如下三个：

1、闭合浮动：由于BFC可以包含浮动元素，所以当一个元素容器内部存在浮动元素时，为了防止容器高度“坍塌”，可以对容器创建BFC。

2、阻止margin重叠：由于box1和box2处于同一上下文，所以在垂直方向上会发生margin重叠，为了阻止两者发生margin重叠，可以为box2添加一个BFC容器。

3、自适应流体布局：BFC最强大的用途其实是用于自适应流体布局，这是基于BFC所确定的区域不会与外部浮动元素发生重叠的特性实现的。


爱学习的小巴
4楼 · 2020-12-03 19:26

1. 解决块级元素垂直方向的边距重叠问题：由于块级元素垂直方向的边距会发生重叠，第一个div和第二个div之间的间距并不是15px加上20px后的35px，而是20px（较大的margin值），为了解决边距重叠的问题，让第两个div之间的间距变成35px，可以在div外面创建一个BFC，因为BFC是一个独立的容器，容器内外互不影响，所以这里两个div之间的间距就变成了35px。

2. 清除浮动：子元素浮动后，父元素失去了高度，为了清除浮动带来的这个影响可以将父元素设置成一个BFC：因为BFC计算高度时，即使子元素是浮动元素也参与计算，所以这里的父元素高度就等于子元素高度而不是之前的0了。

3. 解决元素浮动后发生重叠的问题：元素浮动之后，由于脱离标准文档流叠在了右边的元素上，为了让两个元素不重叠，我们把右边的元素设置成BFC：因为BFC不会与浮动元素的盒子重叠，所以这里的元素就不会叠在浮动元素下面了。



爱梦 - 拿来吧你
5楼 · 2020-12-04 09:43

bfc最常见的应用就是清除浮动流

kitidog2016
6楼 · 2020-12-04 09:58

触发BFC的元素会变成一个独立的盒子，这个独立盒子里的布局不受外部影响，也不会影响到外面的元素！这就是BFC的精髓所在！

常用的触发BFC的方法：

  1. 设置除 float:none 以外的属性值（如：left | right）。

  2. 设置除 overflow: visible 以外的属性值（如： hidden | auto | scroll）。

  3. 设置 display属性值为: inline-block。

  4. 设置 position 属性值为：absolute | fixed。

解决margin叠加问题

如下面的代码所示：


  
  Document
  
  

  

两个块级元素div1和div2会发生上下边距重叠的情况。但是如果我们把div的display改为inline-block，就不会发生上下边距重叠了。代码如下所示：


  
  Document
  
  

  

其实严格说来，并不是由于display: inline-block;触发了BFC从而使上下边距不叠加的，因为BFC的精髓是：触发BFC的元素会变成一个独立的盒子，这个独立盒子里的布局不受外部影响，也不会影响到外面的元素！而div1的margin-bottom不能算是盒子内部的布局。

那是什么原因导致上下边距不叠加的？

因为W3C官方文档规定，上下边距叠加必须满足2个条件：一个是都是块级元素；另一个是都在同一个BFC里面。参见：w3.org关于margin合并的规范说明

所以我们把div1设置为inline-block之后，它就不是块级元素了，不满足条件1，自然就不会发生上下边距叠加。

解决margin影响父元素问题

我们给父元素的第一个子元素设置margin-top值，就会发现它影响到了父元素的margin值，原因是它和父元素的margin-top值合并了。实例如下：


  
  Document
  
  

    

  

我们一般是通过设置父元素的padding-top值为1px来解决的。但是利用BFC有更加简便的解决方法，那就是利用overflow: hidden或者overflow: auto，使父元素形成一个BFC，从而它里面的元素不受外面的元素影响，也不会影响外面的元素。实例如下：


  
  Document
  
  

    

  

清除浮动

如下面代码所示，如果我们给子元素加一个浮动，那么子元素就不能撑开父元素了。


  
  Document
  
  

    

  

原因是，子元素通过float触发BFC，成为了一个独立的盒子，根据BFC的精髓，它不会影响外部元素，也不会受外部元素影响，所以它不会影响父元素的高度，所以不能撑开父元素。

这个时候，如果给父元素触发BFC，就可以强制把子元素拉到它形成的独立盒子里面（在计算BFC的高度时，浮动元素也参与计算），这样就清除浮动了。而触发BFC最好用的还是overflow: hidden或者overflow: auto。实例如下：


  
  Document
  
  

    

  

其它

我们在写css的时候，有时会遇到莫名其妙的问题，这个时候可以考虑给元素加一个overflow: hidden或者overflow: auto，使元素触发BFC成为独立盒子，往往能意想不到的解决问题呢！


我的网名不再改
7楼 · 2020-12-05 13:21

BFC是什么？
块级格式化上下文（Block Formatting Contexts）;
有什么作用？
简单来说BFC就是一个独立不受外界干扰也不干扰外界的盒子.
是web页面中盒模型布局的css渲染模式，一个隔离的独立容器，
形成BFC的条件
浮动：ｆｌｏａｔ元素除了ｎｏｎｅ以外的值。
定位：　绝对定位，相对定位。
ｄｉｓｐｌａｙ为以下的值之一：inline－block，ｔａｂｌｅ－ｃｅｌｌ，ｔａｂｌｅ－ｃａｐｔｉｏｎ
ｏｖｅｒｆｌｏｗ除了visible以外的值（hidden，ａｕｔｏ，ｓｃｒｏｌｌ）
BFC的特性：
１.内部的ＢＯＸ会在垂直方向上一个接一个的放置；
２.垂直方向上的距离由margin决定。
３.BFC区域不会与float元素区域重叠。
４.计算BFC的高度时，浮动元素也参与计算。
５.BFC就是页面上的一个独立容器，里面的子元素不会影响外面的元素。外面的元素也不会影响里面的。

我是大脸猫
8楼 · 2020-12-05 22:18

概述

BFC是块级格式化上下文，它的一个令人熟知的运用是双飞翼布局或者两列布局。但其实它在其它地方也有很巧妙的运用。我把研究的心得记录下来，供以后开发时参考，相信对其他人也有用。

参考资料：
mdn块格式化上下文
为什么BFC可以解决margin叠加问题？
BFC——一个我们容易忽视掉的布局神器

BFC精髓

触发BFC的元素会变成一个独立的盒子，这个独立盒子里的布局不受外部影响，也不会影响到外面的元素！这就是BFC的精髓所在！

常用的触发BFC的方法：

  1. 设置除 float:none 以外的属性值（如：left | right）。

  2. 设置除 overflow: visible 以外的属性值（如： hidden | auto | scroll）。

  3. 设置 display属性值为: inline-block。

  4. 设置 position 属性值为：absolute | fixed。

解决margin叠加问题

如下面的代码所示：


  
  Document
  
  

  

两个块级元素div1和div2会发生上下边距重叠的情况。但是如果我们把div的display改为inline-block，就不会发生上下边距重叠了。代码如下所示：


  
  Document
  
  

  

其实严格说来，并不是由于display: inline-block;触发了BFC从而使上下边距不叠加的，因为BFC的精髓是：触发BFC的元素会变成一个独立的盒子，这个独立盒子里的布局不受外部影响，也不会影响到外面的元素！而div1的margin-bottom不能算是盒子内部的布局。

那是什么原因导致上下边距不叠加的？

因为W3C官方文档规定，上下边距叠加必须满足2个条件：一个是都是块级元素；另一个是都在同一个BFC里面。参见：w3.org关于margin合并的规范说明

所以我们把div1设置为inline-block之后，它就不是块级元素了，不满足条件1，自然就不会发生上下边距叠加。

解决margin影响父元素问题

我们给父元素的第一个子元素设置margin-top值，就会发现它影响到了父元素的margin值，原因是它和父元素的margin-top值合并了。实例如下：


  
  Document
  
  

    

  

我们一般是通过设置父元素的padding-top值为1px来解决的。但是利用BFC有更加简便的解决方法，那就是利用overflow: hidden或者overflow: auto，使父元素形成一个BFC，从而它里面的元素不受外面的元素影响，也不会影响外面的元素。实例如下：


  
  Document
  
  

    

  

清除浮动

如下面代码所示，如果我们给子元素加一个浮动，那么子元素就不能撑开父元素了。


  
  Document
  
  

    

  

原因是，子元素通过float触发BFC，成为了一个独立的盒子，根据BFC的精髓，它不会影响外部元素，也不会受外部元素影响，所以它不会影响父元素的高度，所以不能撑开父元素。

这个时候，如果给父元素触发BFC，就可以强制把子元素拉到它形成的独立盒子里面（在计算BFC的高度时，浮动元素也参与计算），这样就清除浮动了。而触发BFC最好用的还是overflow: hidden或者overflow: auto。实例如下：


  
  Document
  
  

    

  

其它

我们在写css的时候，有时会遇到莫名其妙的问题，这个时候可以考虑给元素加一个overflow: hidden或者overflow: auto，使元素触发BFC成为独立盒子，往往能意想不到的解决问题呢！

作者：馒头加梨子
欢迎任何形式的转载，但请务必注明出处。
限于本人水平，如果文章和代码有表述不当之处，还请不吝赐教。


浅浅77
9楼 · 2020-12-09 15:10

BFC是块级格式化上下文，它的一个令人熟知的运用是双飞翼布局或者两列布局。但其实它在其它地方也有很巧妙的运用。

BFC精髓

触发BFC的元素会变成一个独立的盒子，这个独立盒子里的布局不受外部影响，也不会影响到外面的元素！这就是BFC的精髓所在！

常用的触发BFC的方法：

  1. 设置除 float:none 以外的属性值（如：left | right）。

  2. 设置除 overflow: visible 以外的属性值（如： hidden | auto | scroll）。

  3. 设置 display属性值为: inline-block。

  4. 设置 position 属性值为：absolute | fixed。

解决margin叠加问题

如下面的代码所示：

Document

两个块级元素div1和div2会发生上下边距重叠的情况。但是如果我们把div的display改为inline-block，就不会发生上下边距重叠了。代码如下所示：

Document

其实严格说来，并不是由于display: inline-block;触发了BFC从而使上下边距不叠加的，因为BFC的精髓是：触发BFC的元素会变成一个独立的盒子，这个独立盒子里的布局不受外部影响，也不会影响到外面的元素！而div1的margin-bottom不能算是盒子内部的布局。

那是什么原因导致上下边距不叠加的？

因为W3C官方文档规定，上下边距叠加必须满足2个条件：一个是都是块级元素；另一个是都在同一个BFC里面。参见：w3.org关于margin合并的规范说明

所以我们把div1设置为inline-block之后，它就不是块级元素了，不满足条件1，自然就不会发生上下边距叠加。

解决margin影响父元素问题

我们给父元素的第一个子元素设置margin-top值，就会发现它影响到了父元素的margin值，原因是它和父元素的margin-top值合并了。实例如下：

Document

我们一般是通过设置父元素的padding-top值为1px来解决的。但是利用BFC有更加简便的解决方法，那就是利用overflow: hidden或者overflow: auto，使父元素形成一个BFC，从而它里面的元素不受外面的元素影响，也不会影响外面的元素。实例如下：

Document

清除浮动

如下面代码所示，如果我们给子元素加一个浮动，那么子元素就不能撑开父元素了。

Document

原因是，子元素通过float触发BFC，成为了一个独立的盒子，根据BFC的精髓，它不会影响外部元素，也不会受外部元素影响，所以它不会影响父元素的高度，所以不能撑开父元素。

这个时候，如果给父元素触发BFC，就可以强制把子元素拉到它形成的独立盒子里面（在计算BFC的高度时，浮动元素也参与计算），这样就清除浮动了。而触发BFC最好用的还是overflow: hidden或者overflow: auto。实例如下：

Document
1 2 下一页

相关问题推荐

  • 现在的web开发的要求高吗？2020-11-01 21:57
    回答 120

    相对前几年来说，要高上不少了，毕竟入行的人也是越来越多了，基础的工作对应想要参与的人群基数越来越大，但是对于高端人才的需求还是很多，人才还是相对稀缺性的。所以，想要学web或者其他技术也一样，别等，别观望。web前端就业方向特别多包括web前端开发...

  • 相对定位和绝对定位的区别是什么呢2021-04-09 11:10
    回答 25

    相对定位和绝对定位是定位的两种表现形式，区别如下：一、主体不同1、相对定位：是设置为相对定位的元素框会偏移某个距离。2、绝对定位：absolute 脱离文档流，通过 top,bottom,left,right 定位。二、特点不同1、相对定位：在使用相对定位时，无论是否进行移...

  • 抓包是什么意思？2020-04-01 17:36
    回答 7
    已采纳

    抓包（packet capture）就是将网络传输发送与接收的数据包进行截获、重发、编辑、转存等操作，也用来检查网络安全。抓包也经常被用来进行数据截取等。抓包可以通过抓包工具来查看网络数据包内容。通过对抓获的数据包进行分析，可以得到有用的信息。目前流行的...

  • 前端常用的框架有哪些？2020-11-27 10:54
    回答 89

    常用的前端框架有Bootstrap框架、React框架、Vue框架、Angular框架、Foundation框架等等

  • 前端自学的效果怎么样2020-11-19 13:46
    回答 65
    已采纳

    前端是目的就业前景非常不错的一个计算机技术，但是自学的话还是有一定难度的，网络上自学是碎片化的，同时互联网技术跟新换代快，自己的话比较吃力也学习不到最新的技术。

  • SSR 是什么意思？2020-03-20 18:56
    回答 6

    SSR就是一台服务器，可以利用 SSR 在远程的服务器上配置 SSR，使其能够成为 SSR 节点，这样本地电脑或者其它设备利用 SSR 节点实现 VPN 或者远程上网及游戏加速等方面。ShadowsocksR（简称 SSR）是 Shadowsocks 分支，在 Shadowsocks 的基础上增加了一些数据...

  • 现在计算机培训都有什么课程？2020-10-31 14:36
    回答 52
    已采纳

    计算机培训方向比较多，建议找适合自己的方向选择培训编程类：JAVA、WEB、Python、C/C++、C#等测试类：软件测试运维类：云计算、网络安全设计类：UI设计、3D建模等

  • echarts 图表类型设置为time 时 ，设置2021-01-07 11:14
    回答 11

    1、代码判断xAxis: {type: 'time',splitLine: {show: false},interval: 3600, // 设置x轴时间间隔axisLabel: {formatter: function(value, index) {return liangTools.unix2hm(value)}}},首先要把xAxis 显示类型设置成time，然后设置对应X轴......

  • 移动跨平台开发框架有哪些HTML5移动框架 2022-04-01 18:57
    回答 8

    HTML5 + CSS + JavaScript 开发 跨平台重用代码 

  • miniMobile移动端框架有什么特点HTML5移动框架 2022-04-01 18:57
    回答 4

    采用rem单位自动响应,并提供独有栅格化系统快速定义宽高、边距节省css代码量,同时总结各大型移动端网页,提供一套ui颜色搭配规范,尺寸规范,字体规范等。

  • 求推荐界面比较漂亮的移动开发框架HTML5移动框架 2022-03-15 16:12
    回答 10

    iView UI、ioni、SUI

  • 移动端开发用什么JS框架好HTML5移动框架 2022-03-11 18:19
    回答 6

     jQTouch 

  • 现在移动端开发都用的什么框架HTML5移动框架 2022-03-11 18:19
    回答 4

    如果只是普通的移动端用vue react 或者dva 如果是要编译成小程序什么的或者混生 就用uni-app（对应vue语法）taro（对应react） 或者纯原生 这个没有限制的，自己怎么舒服怎么来

  • 为什么说atom和sublime都是前端开发者用的HTML编辑器 2022-01-06 15:12
    回答 4

    因为可以运用在网页和小程序的开饭中，而且开源，用着便宜，企业都很喜欢

  • 前端开发用的文本编辑器有哪些？HTML编辑器 2022-01-06 15:10
    回答 10

    一、Visual Studio Code下载地址：https://code.visualstudio.com/微软在2015年4月30日Build 开发者大会上正式宣布了 Visual Studio Code 项目：一个运行于 Mac OS X、Windows和 Linux 之上的，针对于编写现代 Web 和云应用的跨平台源代码编辑器。Visual Stud...

  • 如何循环淡入淡出图片css样式 2021-12-08 11:25
    回答 9

    jQuery自带淡入淡出效果 https://www.w3school.com.cn/jquery/jquery_fade.asp 看看这个 

没有解决我的问题，去提问