【BFC + 双飞翼和圣杯布局(扩展了解)】

最新推荐文章于 2025-06-17 10:59:44 发布

yx-02

最新推荐文章于 2025-06-17 10:59:44 发布

阅读量387

点赞数

文章标签： css css3 html

本文链接：https://blog.youkuaiyun.com/YANG_helloworld/article/details/121959706

版权

BFC（Block Formatting Context）是CSS布局中的一种概念，它定义了块级元素如何在其内部和外部进行布局。BFC可以通过特定条件触发，如浮动、overflow、display等。其特性包括：解决margin重叠、防止与浮动元素重叠、计算高度包含浮动元素等。在自适应布局、双飞翼和圣杯布局中，BFC起着关键作用。理解并掌握BFC有助于优化网页布局和解决高度塌陷等问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

BFC

即 Block Formatting Contexts (块级格式化上下文)，通俗一点来讲，可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。
BFC是一个特殊的块元素,只有块才可以成为BFC,但是不是所有的块都是BFC

BFC的触发条件:

    根元素 html默认就是一个BFC
    添加浮动且float的值不为none ,就是BFC
    overflow的值不为visible就是BFC
    display的值为 inline-block/ table-cell/ table-caption/ flex/ inline-flex 就是BFC
    position的值为absolute或fixed就是BFC

BFC的特性及应用

  1/ box垂直方向的距离由margin决定，属于同一个BFC的两个相邻box的margin会发生重叠（通过BFC来用于防止margin重叠）
  解决方法:
        只要2个div不属于同一个BFC,也就不会上下重叠
     只要给下面的box添加一个父元素且触发父元素为BFC即可
     1\  父元素添加浮动
     2\  父元素添加overflow
     3\  父元素添加display
     4\  父元素添加position
     
  2/ BFC的区域不会与float box发生重叠（通过此实现自适应两栏布局,三栏布局）
  两栏需求: 既要不重叠,又要右边自适应,(左边盒子:宽200px,添加左浮动)
  1: 添加浮动,设置宽度百分比
            float:left;
            width: calc(100% - 200px);
  2: overflow: auto;   代码最精简
  3: 用display转化
            display: inline-block;
            width: calc( 100%- 200px);
  4:重点
           display: flex;
  5:
          display: inline-flex;
          width: calc( 100%- 200px);
  6:用定位
        position: absolute;
        left: 200px;
        width: calc(100% - 200px);
   三栏需求:(中间自适应,左右宽200px)
       1\  三栏都加左浮动,中间加个宽 width: calc(100% - 400px);
       2\  左加左浮动,右加右浮动,中间用overflow(值只要不是visable都可以) 中间右边的div顺序换一下,需要换布局
       3\  左加左浮动,右加右浮动,中间用display(不能是block),加个宽   width: calc(100% - 400px);
       4\  左加position(top:0;left:0;),右加position(top:0;right:0;),中间用position(left:左边宽;top:0;),设置 width: calc(100% - 400px);

  3/ 计算BFC的高度时，浮动元素也参与计算（父元素成为BFC用于清除内部浮动）
      1:给父元素添加浮动,虽然可以解决高度塌陷的问题,但是不好的是引发了新的浮动问题.
       2:overflow:hidden; 虽然解决高度塌陷,但是不适合跟定出去的效果使用,因为这个盒子有溢出隐藏的作用,会把溢出的隐藏的.
       3:overflow:auto; 虽然能解决高度塌陷,但是不适合内部的东西超出,因为该属性声明有超出的除滚动条.
       4:overflow:scroll; 虽然能解决高度塌陷,但是有滚动栏不好看.
       5:display:inline-block; 
       6:position:fixed;
  4/  BFC中的盒子会在垂直方向一个接一个的放置(因为整个html标签是一个BFC)
  5/ 每个元素通过margin移动位置时,是从盒子内部开始的,不是从边框开始的 
  6/ BFC就是页面上的一个独立容器,容器里面的元素不会影响到外面的元素.

双飞翼和圣杯布局

双飞翼布局,是左边的盒子和右边的盒子跟中间的盒子是有重叠部分的,这个名字是把它比喻成鸟了,中间就是鸟的身体,左右就是翅膀,翅膀和身体是连接的.
圣杯布局,是左边的盒子和右边的盒子跟中间的盒子是没有重叠部分的,叫这个名字是把它比喻成杯子,中间的主体和两边的杯耳相互连接没有很重要,是独立的3块,没有重叠部分
- 这2个从最终的视觉效果上看是一模一样的