css-BFC

乖女子@@@

已于 2022-10-11 11:01:34 修改

阅读量140

点赞数

分类专栏： 2022_html+css 文章标签： css html 前端

于 2021-03-28 18:52:18 首次发布

本文链接：https://blog.csdn.net/qq_43260366/article/details/115285127

版权

2022_html+css 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

1.FC(Formatting Content)格式上下文

（1）定义：指的是页面中的一块渲染区域,它决定了其子元素如何定位，以及与其他元素的相互关系和作用；

2.BFC(Block Formatting Content)

(1)定义

块级格式上下文，一个独立的块级渲染区域

(2)触发BFC的方式

根元素,body本身就是一个BFC
设置浮动
设置定位(absolute,fixed)
弹性布局
overflow:hidden/auto/scroll
display:inline-block

(3)BFC块级格式上下文的布局规则

内部的Box会在垂直方向，一个接一个地放置。（不用解释）
属于同一个BFC的两个相邻Box的margin会发生重叠
BFC的区域不会与float box重叠
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之如此
计算BFC的高度时，浮动元素也参与计算；清除浮动

(4)利用BFC解决的事情

1.解决兄弟元素垂直塌陷的问题·；

处于同一个BFC,会产生垂直塌陷；

<body>
   <style>
     .box {
       width: 100px;
       height: 100px;
       background-color: green;
       margin: 100px;
     }
     .wraper {
       overflow: hidden;
     }
   </style>
  <!--此时两个box的垂直方法发生了margin塌陷-->   
   <div class="box"></div>
   <div class="box"></div>
 </body>

解决：给另一个盒子设置一个父盒子，启动父盒子的BFC,此时这两个盒子不处于同一块BFC，因此没有垂直塌陷的问题；

<body>
   <style>
     .box {
       width: 100px;
       height: 100px;
       background-color: green;
       margin: 100px;
     }
     // 现在两个盒子不属于同一块BFC,解决了垂直塌陷的问题
     .fa{  
       overflow:hidden;
     }
   </style>
  <!--此时两个box的垂直方法发生了margin塌陷-->   
   <div class="box"></div>
  <div class='fa'>
     <div class="box"></div>
  </div>
 </body>

2.制作右侧自适应的盒子问题

box2为浮动元素，脱标不占位置(注：浮动元素只会影响后面的元素不会影响前面的元素)

由于box2浮动，所以box3会跑到做左边，同时标准流层级比浮动流层级低所以会被box2盖住

 <style>
    .box1 {
      background-color: red;
      width: 200px;
      height: 300px;
    }
    .box2 {
      float: left;
      width: 200px;
      height: 200px;
      background-color: green;
    }
    .box3 {
      width: 300px;
      height: 200px;
      background-color: blue;
    }
  </style>
</head>
<body>
  <!-- box1为块级元素独占一行 -->
  <div class="box1"></div>
  <!-- box2为浮动元素，脱标不占位置(注：浮动元素只会影响后面的元素不会影响前面的元素) -->
  <div class="box2"></div>
  <!-- 由于box2浮动，所以box3会跑到做左边，同时标准流层级比浮动流层级低所以会被box2盖住(多余部门显示) -->
  <div class="box3"></div>
</body>

此时给box3设置一个BFC,---由于BFC的盒子不会被外界影响也不会影响外界，所以此时右面盒子不会被覆盖，可以实现右边盒子自适应；

 <style>
    .box1 {
      background-color: red;
      width: 200px;
      height: 300px;
    }
    .box2 {
      float: left;
      width: 200px;
      height: 200px;
      background-color: green;
    }
    .box3 {
      width: 300px;
      height: 200px;
      background-color: blue;
      overflow: hidden;
    }
  </style>
</head>
<body>
  <!-- box1为块级元素独占一行 -->
  <div class="box1"></div>
  <!-- box2为浮动元素，脱标不占位置(注：浮动元素只会影响后面的元素不会影响前面的元素) -->
  <div class="box2"></div>
  <!--box3设置了bfc，不会被其他盒子所影响 -->
  <div class="box3"></div>