谈谈BFC

最新推荐文章于 2022-09-16 10:56:07 发布

Muqiu7890

最新推荐文章于 2022-09-16 10:56:07 发布

阅读量146

点赞数

分类专栏：日常总结 css

本文链接：https://blog.csdn.net/qj6837/article/details/88660310

版权

日常总结同时被 2 个专栏收录

51 篇文章 0 订阅

订阅专栏

css

4 篇文章 0 订阅

订阅专栏

BFC(Block Formatting Context）中文叫块级格式化上下文, 它是一个独立渲染的区域。它有着独立的渲染规则，它决定了块级元素如何对它的内容进行布局，以及与其他元素的关系和相互关系

BFC触发条件

浮动元素（float不为none）
绝对定位元素（position: fixed | absolute）
overflow (auto | scroll | hidden)
display (table-cell | table-caption | inline-block | inline-flex | flex)
根元素

BFC布局规则

内部的Box会在垂直方向，一个接一个地放置(即块级元素独占一行)。
BFC的区域不会与float box重叠(利用这点可以实现自适应两栏布局)。
内部的Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠(margin重叠三个条件:同属于一个BFC;相邻;块级元素)。
计算BFC的高度时，浮动元素也参与计算。（清除浮动 haslayout）
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

BFC特性

阻止垂直外边距重叠
在同属于一个BFC时，两个元素会发生垂直的margin重叠

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>BFC</title>
</head>
<style>
  p {
    background: blue;
    width: 100px;
    height: 100px;
    margin: 100px;
  }
</style>
<body>
<div>
  <p>jjjj</p>
  <p>hhhh</p>
</div>
</body>
</html>

BFC垂直重叠
在上面这个例子中，两个块元素之间的距离为100px，因为发生了margin重叠，那么怎么让它们之间的距离为200px呢？让它们不处在同一个BFC中

<style>
  p {
    background: blue;
    width: 100px;
    height: 100px;
    margin: 100px;
  }
  .margin-overlay {
    overflow: hidden;
  }
</style>
<body>
<div>
  <p>jjjj</p>
  <div class="margin-overlay">
    <p>hhhh</p>
  </div>
</div>
</body>

在这里插入图片描述
BFC不会重叠浮动元素
可以用来实现自适应两栏布局,由于设置overflow:hidden并不会触发IE6-浏览器的haslayout属性，所以需要设置zoom:1来兼容IE6-浏览器。

<style>
  .box1{
    height: 100px;
    width: 100px;
    float: left;
    background: lightblue;
  }
  .box2{
    width: 300px;
    height: 300px;
    background: #eee;
  }
</style>
<body>
<div class="box1">我是一个左浮动的元素</div>
<div class="box2">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
  哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
  哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
  哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</div>
</body>

浮动重叠
解决重叠问题，可以给box2设置overflow属性

.box2{
    width: auto;
    height: 300px;
    background: #eee;
    overflow: hidden;
    /*overflow: auto;*/
  }

在这里插入图片描述
BFC可以包含浮动元素
可以用来清除浮动

<style>
  .box1 {
    background: red;
  }
  .box2 {
    width: 100px;
    height: 100px;
    float: left;
    background: blue;
  }

</style>
<body>
<div class="box1">
  <div class="box2">
    哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
  </div>
</div>
</body>

在这里插入图片描述
由于box2设置了左浮动，脱离了文档流，父元素高度塌陷。为了解决这个问题，可以给父元素触发BFC

.box1 {
    background: red;
    overflow: hidden;
  }

在这里插入图片描述

Muqiu7890

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
谈谈BFC

BFC(Block Formatting Context）中文叫块级格式化上下文, 它是一个独立渲染的区域。它有着独立的渲染规则，决定了其子元素如何布局，以及与其他元素间的作用与关系。BFC触发条件...
复制链接

扫一扫

专栏目录

谈谈BFC

BFC触发条件

BFC布局规则

BFC特性

“相关推荐”对你有帮助么？