高端的bfc

最新推荐文章于 2024-07-20 15:40:46 发布

z609373067

最新推荐文章于 2024-07-20 15:40:46 发布

阅读量391

点赞数

分类专栏： css 文章标签： css 布局 web

本文链接：https://blog.csdn.net/z609373067/article/details/75907052

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

BFC?

bfc是什么？老实说在别人第一次问起我时，我也不知道是什么东西，但是在自己深入了解过后，就会发现… 噢原来是这个啊只要对css文档流以及布局熟练的人可能只感觉BFC就是一个比较高大上的名字而已。

BFC是什么

BFC(Block Formatting Context)是Web页面中盒模型布局的CSS渲染模式。它的定位体系属于常规文档流。

如何新建一个bfc容器？

overflow:scroll和overflow: hidden.
display: flex和display: table.
float:left
display:inline-block
position:absolute
上述几个方法也都说明了除了overflow属性外，其余的都改变了本元素的文档流结构，使其脱离出原来的bfc成为一个新的bfc容器，一般我们都是用overflow属性，不会影响到本身的布局
一个创建bfc的例子

css:
      #ul2{
          width: 1000px;
          background-color: aqua;
          overflow: hidden;
          height: 200px;
      }
      #li1{
          float: left;
          width: 100px;
          height: 100px;
          border: 1px solid blue;
      }
      #li2{
          overflow: hidden;
          border: 1px solid blue;
      }
      #li3{
          display:inline-block;
          border: 1px solid blue;
      }
      #li4{
          position: absolute;
          border: 1px solid blue;
      }
      #ul2>li{
            margin:10px 0;
      }
html：
<p>新建一个bfc容器:</p>
<ul id="ul2">
    <li id="li1">float:left</li>
    <li id="li2">overflow:hidden 你看看我的下外边距</li>
    <li id="li3">display:inline-block 你看看我的上外边距</li>
    <li id="li4">position:absolute</li>
</ul>
<p>注意看 上面蓝色里的bfc已经不能影响到蓝框元素的了 他们都是脱离出来成为新的bfc了所以蓝色容器的bfc规则已经失效了</p>

bfc容器的规则

上面提到了bfc规则那么bfc规则是什么呢?
1. 一个bfc内部和外部是不会互相影响的。
2. bfc容器布局内部是从容器顶部开始
3. 同一个bfc容器内的两个元素的垂直margin会发生重叠(具体下面会详细解释)
4. 每个盒子的左边界都会包容容器的左边界(块级元素单独成行)
一个bfc容器的例子
这里写图片描述

      #ul{
          width:1000px;
          background-color: antiquewhite;
          overflow: hidden;
      }
      #ul>li{
          list-style: none;
          display: block;
          border: 1px solid blue;
          margin: 25px 0;
      }
<p>一个bfc容器的规则:</p>
   <ul id="ul">
       <li>1.给一个元素创建bfc就是给其创建一个新的容器容器外部和内部不会互相影响</li>
       <li>2.盒子模型布局是从容器顶部开始</li>
       <li>3.同一个bfc中两个块级元素垂直margin会发生折叠</li>
       <li>4.每个盒子的左边界都包容容器左边界（块级元素单独成行）</li>
   </ul>

通过上面的解释相信大家都明白了bfc是什么了，下面让我们来看看bfc在布局上有哪些应用

bfc实际应用

1.元素垂直margin重叠问题

下图是个很好的例子

很奇怪吧，bfc内容器垂直margin叠加的规则已经很清楚了

#ul3{
            width: 1000px;
            background-color: cadetblue;
            overflow: hidden;
            height: 200px;

        }
        #ul3>li{
            list-style: none;
            border: 1px solid blue;
        } 
        #li11{
            margin-bottom: 15px;
        }
        #li22{
            margin-top: 20px;
            margin-bottom: -10px;
        }
        #li33{
            margin-top: 20px;
            margin-bottom: -15px;
        }
        #li44{
            margin-top: -10px;
        }
<ul id="ul3">
    <li id="li11">margin-bottom: 15px 我和下面的间距是20px</li>
    <li id="li22">margin-top: 20px; margin-bottom: -10px; 我和下面的间距是10px</li>
    <li id="li33">margin-top: 20px; margin-bottom: -15px; 我和下面的间距是 -15px</li>
    <li id="li44">margin-top: -10px;</li>
</ul>
<p>全部都为正值，取最大者；不全是正值，则都取绝对值，然后用正值减去最大值；没有正值，则都取绝对值，然后用0减去最大值</p>

解决bfc容器内外边距最常用办法就是让其成为一个新的bfc容器
这里写图片描述

        #ul4{
            width: 1000px;
            background-color: chartreuse;
            overflow: hidden;
            height: 500px;
        }
        #ul4>li{
            border: 1px solid blue;
        }
        #li111{
            margin: 30px 0;
        }
        #li222{

            padding: 40px 0;
            margin-bottom: 20px;
        }
        #li333{
            margin: 50px 0;
            display:inline-block
        }
        <p>解决办法:</p>
        <ul id="ul4">
            <li id="li111">margin: 30px 0 1:若是与父元素发生重叠 父元素 overflow:hidden</li>
            <li id="li222"> margin: 40px 0 2:padding替代margin 缺点 元素内容会变大</li>
            <li id="li333">margin: 50px 0 3:元素成为bfc容器</li>
        </ul>

2.float父元素坍塌问题

我们经常会用到float这个属性但是却忽视了复原坍塌这个问题
下面的父元素是有backgroun-color的,并且有一个很小的高度(为了让它显示出来)
这里写图片描述

        #father{
            width: 1080px;
            background-color: #767676;
        }
        #son1{
            width: 30%;
            float: left;
            height: 500px;
            border: 1px solid blue;
        }
        #son2{
            width: 50%;
            height: 400px;
            border: 1px solid blue;
            float: right;
        }
        <p>父元素包含浮动坍塌</p>
        <div id="father">我怎么塌了
            <div id="son1"></div>
            <div id="son2"></div>
            <div id="ways"></div>
        </div>

具体大家可以自己去试一试，我就不给大家演示了

浮动文字环绕问题

文字环绕有时候是很方便，但有事后确实很麻烦
如下例子
这里写图片描述

         #box{
            width: 800px;
            height: 300px;
            border: 1px solid blue;
            overflow:hidden
        }
        /*#box>p{
            overflow: hidden;
        }  */ //这是解决办法
        #img{
            width: 200px;
            height: 200px;
            background-color: red;
            float: left;
        }
         <div id="box">
         <div id="img"></div>
         <p>文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕</p>
        </div>

为什么会出现这种情况呢? 首先大容器box成为一个bfc容器，其子元素都是应用于bfc规则的,但是img它float了成为了一个新的bfc不再受box容器里规则约束，float特性(即明显的脱离了文档流(并不是真正的脱离) 它占据一定空间)
float假设他脱离了文档流，他后面的元素就会像bfc规则一样，从上到下，贴紧box的左边框，但是由于float占一定的空间所以文字上面的一部分就会向右空出来一部分给img。从而形成文字环绕效果，float属性原本就是设计给文字环绕的
解决方法很明显让p也变成一个bfc容器就可以了不影响布局的方式就是overflow：hidden了
这里写图片描述

以上就是bfc的基本内容了，其实关于css布局渲染方面还有些内容

IFC(Inline Formatting Contexts)内联格式化上下文,
FFC(GridLayout Formatting Contexts)自适应格式化上下文
GFC(Flex Formatting Contexts)网格布局格式化上下文、
大家可以多了解一些，其是这些东西就是布局方面的规则基础，只是将其明文化，在实践中都可以自己探索出来