BFC的理解

1. 概念

　　- Block Formatting Context,翻译过来就是块级格式化上下文

　　- bfc是一种属性，开启这种环境，就会让他和外界隔绝，外界不会影响到环境里面，环境里面也不会影响到外界，渲染成了一个独立的区域。

 

2. 怎么才能触发BFC

　　 根元素(html) float属性不为none position为absolute或fixed display为inline-block, table-cell, table-caption,          flex, inline-flex overflow不为visible

 

3. BFC可以解决什么问题

　　- 外边距重叠问题

外边距重叠,要注意这不是bug，规范就是这样的，当两个盒子上下同时拥有上下间距，会取最大值

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      width: 100px;
      height: 100px;
      background-color: hotpink;
      margin: 100px 0;
    }
  </style>
</head>
<body>
  <div></div>
  <div></div>
</body>
</html>
　　- 清除浮动
当子盒子开启float后会影响后面的布局以及盒子高度
posted @ 2022-07-25 15:03  腿毛比头发多的程序员  阅读(17)  评论(0)  编辑  收藏  举报