资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/css 块级格式化上下文（BFC）

css 块级格式化上下文（BFC）

J4ck_Chan / 616人阅读

摘要：一块级格式化上下文什么是块级格式化上下文，块级格式化上下文就是一个块级元素的渲染显示规则可以把理解为一个封闭的大箱子，，容器里面的子元素不会影响到外面的元素触发的条件如下根元素的值不为。

一、块级格式化上下文（BFC） 1、什么是块级格式化上下文？ 
</>复制代码 
  1.     Block Formatting Contexts (BFC，块级格式化上下文)就是一个块级元素 的渲染显示规则
  2.   （可以把 BFC 理解为一个封闭的大箱子，，容器里面的子元素不会影响到外面的元素）
2、触发BFC的条件如下：

根元素

float的值不为none。

overflow 除了 visible 以外的值（hidden，auto，scroll）

display的值为table-cell, table-caption, inline-block中的任何一个。

绝对定位元素：position (absolute、fixed)

弹性盒 flex boxes (元素的 display: flex 或 inline-flex)

3、BFC 的布局规则：

内部的盒子会在垂直方向，一个个地放置；

BFC是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然

属于同一个BFC的 两个相邻Box的 上下margin会发生重叠 ；

计算BFC的高度时，浮动元素也参与计算

每个元素的左边，与包含的盒子的左边相接触，即使存在浮动也是如此；

BFC的区域不会与float重叠；

4、BFC特性
1.同一BFC下外边距会发生折叠：

代码如下：

</>复制代码 
  2.     
  3.     外边距折叠
  4.     
  5.     
  6.     
  7.     
  8.         
    上下100margin
  9.         
  10.         
    上下100margin
  11.     
  12.

效果图：

第一个div的下边距和第二个div的上边距发声了重叠，所以两个盒子之间距离只有100px，而不是200px。

解决方法：

放在不同的BFC下

代码如下：

</>复制代码 
  2.     
  3.     外边距折叠
  4.     
  5.     
  6.     
  7.         
  8.             
    上下100margin
  9.         
  10.         
  11.             
    上下100margin
  12.         
  13.

效果图：

这次我们可以清晰的看清两个中间是200px；并没用重叠。

2、BFC可以包含浮动的元素（清除浮动）

代码如下：

</>复制代码 
  2.     
  3.     高度塌陷
  4.     
  5.     
  6.     
  7.             
    浮动
  8.         
  9.             
  10.     
  11.

效果图：

由于容器内元素浮动，脱离了文档流，所以容器只剩下 2px 的边距高度。如果使触发容器的 BFC，那么容器将会包裹着浮动元素。

代码如下：

</>复制代码 
  2.     
  3.     高度塌陷
  4.     
  5.     
  6.     
  7.             
    浮动
  8.         
  9.             
  10.     
  11.
3、侵占浮动元素的问题

代码如下：

</>复制代码 
  2.     
  3.     高度塌陷
  4.     
  5.     
  6.     
  7.             
    浮动
  8.     
  9.             
  10.         
  11.             
  12.             
  13.             欢迎大家观看！
  14.             欢迎大家观看！
  15.             欢迎大家观看！
  16.             欢迎大家观看！
  17.             欢迎大家观看！
  18.             欢迎大家观看！
  19.             欢迎大家观看！
  20.             欢迎大家观看！
  21.             欢迎大家观看！
  22.             欢迎大家观看！
  23.             欢迎大家观看！
  24.             欢迎大家观看！
  25.             欢迎大家观看！
  26.             欢迎大家观看！
  27.             欢迎大家观看！
  28.             欢迎大家观看！
  29.             欢迎大家观看！
  30.             欢迎大家观看！
  31.             欢迎大家观看！
  32.             欢迎大家观看！
  33.             欢迎大家观看！
  34.             欢迎大家观看！
  35.             欢迎大家观看！
  36.             欢迎大家观看！
  37.             
  38.     
  39.

效果图：

解决方法：
通过触发btm2的BFC解决
代码如下：

</>复制代码 
  2.     
  3.     高度塌陷
  4.     
  5.     
  6.     
  7.             
    浮动
  8.     
  9.     
  10.         
  11.             
  12.         
  13.             
  14.             
  15.             欢迎大家观看！
  16.             欢迎大家观看！
  17.             欢迎大家观看！
  18.             欢迎大家观看！
  19.             欢迎大家观看！
  20.             欢迎大家观看！
  21.             欢迎大家观看！
  22.             欢迎大家观看！
  23.             欢迎大家观看！
  24.             欢迎大家观看！
  25.             欢迎大家观看！
  26.             欢迎大家观看！
  27.             欢迎大家观看！
  28.             欢迎大家观看！
  29.             欢迎大家观看！
  30.             欢迎大家观看！
  31.             欢迎大家观看！
  32.             欢迎大家观看！
  33.             欢迎大家观看！
  34.             欢迎大家观看！
  35.             欢迎大家观看！
  36.             欢迎大家观看！
  37.             欢迎大家观看！
  38.             欢迎大家观看！
  39.             
  40.         
  41.     
  42.

效果图：

持续更新，欢迎大家指教！
GPU云服务器 云服务器 电脑上下载的视频怎么转换格式 格式化css文件 css格式 bfc

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113522.html

相关文章

  • 十分钟复习CSS盒模型与BFC

    摘要：盒模型与本文为收集整理总结网上资源旨在系统复习盒模型与节省复习时间阅读分钟什么是盒模型每一个文档中，每个元素都被表示为一个矩形的盒子它都会具有内容区盒模型主要分两种标准盒模型盒模型怪异盒模型两者的区别标准盒模型的宽高则为内容区域的宽高盒模型 css盒模型与BFC 本文为收集整理总结网上资源 旨在系统复习css盒模型与bfc 节省复习时间 阅读10分钟 什么是盒模型 每一个文档中，每...

    verano 评论0 收藏0

  • 十分钟复习CSS盒模型与BFC

    摘要：盒模型与本文为收集整理总结网上资源旨在系统复习盒模型与节省复习时间阅读分钟什么是盒模型每一个文档中，每个元素都被表示为一个矩形的盒子它都会具有内容区盒模型主要分两种标准盒模型盒模型怪异盒模型两者的区别标准盒模型的宽高则为内容区域的宽高盒模型 css盒模型与BFC 本文为收集整理总结网上资源 旨在系统复习css盒模型与bfc 节省复习时间 阅读10分钟 什么是盒模型 每一个文档中，每...

    suxier 评论0 收藏0

  • BFC原理详解

    摘要：最常见的有简称和简称。可以把它理解成是一个独立的容器，并且这个容器的里的布局，与这个容器外的毫不相干。根据布局规则第二条垂直方向的距离由决定。参考前端精选文摘神奇背后的原理之详解深入理解流体特性和特性下多栏自适应布局布局 一.BFC是什么 在解释 BFC 是什么之前，需要先介绍 Box、Formatting Context的概念。 1.BOX：CSS布局的基本单位 Box是CSS布局的...

    ziwenxie 评论0 收藏0

  • 前端进阶之什么是BFC？BFC的原理是什么？如何创建BFC？

    摘要：官方说法就是它规定了用户端在媒介中如何处理文档树。是的包含块，同时又是的包含块，不是绝对的。因此称为匿名盒子。行内盒子行内级元素会生成行内级盒子，该盒子同时会参与行内格式化上下文的创建。如果只有一个值指定为，则其使用的值来自相等。 作者：陈大鱼头 github： KRISACHAN 盒模型 The CSS box model describes the rectangular b...

    lowett 评论0 收藏0

  • CSS > 译文：理解CSS中的块级格式化上下文

    摘要：译文理解中的块级格式化上下文块级格式化上下文是网页视觉渲染的一部分，并用于决定块盒子的布局。根据所言浮动绝对定位元素为或行内块元素表格单元格表格标题以及属性值不为的元素除了该值被传播到视点的情况将创建一个新的块级格式化上下文。 CSS > 译文：理解CSS中的块级格式化上下文 Original Author: Ritesh Kumar Original Article: http:/...

    LancerComet 评论0 收藏0

  • CSS中重要的BFC

    摘要：中有个重要的概念，搞懂可以让我们理解中某些原本诡异的地方。简介在解释之前，先说一下文档流。我们常说的文档流其实分为定位流浮动流普通流三种。使用包含浮动元素注意，这里触发并不能阻止其它形式的脱离文档流的元素覆盖正常流元素。 CSS中有个重要的概念BFC，搞懂BFC可以让我们理解CSS中某些原本诡异(??)的地方。 1. 简介 在解释BFC之前，先说一下文档流。我们常说的文档流其实分为定位...

    plus2047 评论0 收藏0

发表评论

登陆后可评论

0条评论

J4ck_Chan

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<