简单明了的告诉你，CSS中的BFC到底是什么？

最新推荐文章于 2024-07-18 20:18:47 发布

励志成为前端大佬

最新推荐文章于 2024-07-18 20:18:47 发布

阅读量83

点赞数

文章标签： css 前端 html

本文链接：https://blog.csdn.net/lizhichengwei/article/details/128058477

版权

常见的几种定位方式

1.标准流

2.浮动

3.定位

什么是BFC？以及它的作用是什么呢？

BFC（Block formatting context）直译为“块级格式化上下文”，它可以解决浮动，盒子塌陷等问题

通俗易懂的说法：BFC是单独存在于页面中的盒子，它不受任何盒子的影响，它有一套自己的摆放规则，它会形成一个独立的空间，让空间里面的元素不影响外面的元素。

如何触发BFC？

1.根元素

2.float不为none以外的值

3.position为absolute或fixed

4.display的值是inline-block，table-cell，flex,inline-flex

5.overflow不为visible以外的值（hidden，auto，scroll）

作用：清除浮动


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .father {
      /* 1、把father盒子转换成BFC盒子，解决：清除浮动 */
      /* float: left; */
      /* display: inline-block; */
      overflow: hidden;
      
      width: 400px;
      background-color: pink;
    }

    .son {
      float: left;
      width: 100px;
      height: 400px;
      background-color: blue;
    }
    
  </style>
</head>
<body>
  <div class="father">
    <div class="son"></div>
  </div>
</body>
</html>

解决盒子塌陷

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .father {
      /* 2、将father转换成BFC盒子，解决：margin的塌陷现象 */
      /* float: left; */
      /* display: inline-block; */
      overflow: hidden;
      
      width: 400px;
      height: 400px;
      background-color: pink;
    }

    .son {
      width: 100px;
      height: 100px;
      background-color: blue;
      margin-top: 100px;
    }
    
  </style>
</head>
<body>
  <div class="father">
    <div class="son"></div>
  </div>
</body>
</html>

励志成为前端大佬

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
简单明了的告诉你，CSS中的BFC到底是什么？

通俗易懂的说法：BFC是单独存在于页面中的盒子，它不受任何盒子的影响，它有一套自己的摆放规则，它会形成一个独立的空间，让空间里面的元素不影响外面的元素。4.display的值是inline-block，table-cell，flex,inline-flex。5.overflow不为visible以外的值（hidden，auto，scroll）BFC（Block formatting context）直译为“3.position为absolute或fixed。2.float不为none以外的值。
复制链接

扫一扫