BFC(块级格式化上下文)

最新推荐文章于 2023-07-27 19:54:18 发布

weixin_41959367

最新推荐文章于 2023-07-27 19:54:18 发布

阅读量90

点赞数

文章标签： js css

本文链接：https://blog.csdn.net/weixin_41959367/article/details/111600729

版权

BFC(块级格式化上下文)

文章目录

BFC(块级格式化上下文)
css的定位方式：
什么是BFC?
如何触发BFC？
BFC的特性

css的定位方式：

普通流(Normal Flow)

在普通流中，元素按照其在 HTML 中的先后位置至上而下布局，在这个过程中，行内元素水平排列，直到当行被占满然后换行，块级元素则会被渲染为完整的一个新行，除非另外指定，否则所有元素默认都是普通流定位，也可以说，普通流中元素的位置由该元素在 HTML 文档中的位置决定。

浮动 (Floats)

在浮动布局中，元素首先按照普通流的位置出现，然后根据浮动的方向尽可能的向左边或右边偏移，其效果与印刷排版中的文本环绕相似。

绝对定位 (Absolute Positioning)

在绝对定位布局中，元素会整体脱离普通流，因此绝对定位元素不会对其兄弟元素造成影响，而元素具体的位置由绝对定位的坐标决定。

BFC 正是属于普通流的，因此它对兄弟元素也不会造成什么影响。

什么是BFC?

从样式上看，具有 BFC （Block Formatting Contexts）的元素与普通的容器没有什么区别，但是从功能上，具有 BFC 的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器没有的一些特性，例如可以包含浮动元素。

简单来说，BFC 就是一种属性，这种属性会影响着元素的定位以及与其兄弟元素之间的相互作用。

如何触发BFC？

一个BFC是一个HTML盒子并且至少满足下列条件中的任何一个：

float的值不为none
position的值不为static或者relative（absolute，fixed）
display的值为 table,table-cell, table-caption, inline-block, flex, 或者 inline-flex中的其中一个
overflow的值不为visible（hidden，auto，scroll）
注意：“display:table” 本身并不产生 BFC，而是由它产生匿名框，匿名框中包含 “display:table-cell” 的框会产 BFC。总之，对于 “display:table” 的元素，产生 BFC 的是匿名框而不是 “display:table”

BFC的特性

1.BFC会阻止外边距折叠

属于同一个BFC的两个相邻的盒子的margin会发生重叠。

//HTML
<div class="container">
  <p>1</p>
  <p>2</p>
</div>

//CSS
.container{
  display:table;
}
p{
  background-color:pink;
  width:200px;
  height:200px;
  margin:50px 0;
  text-align:center;
  line-height:200px;
}

在这里插入图片描述两个块级元素相邻，但当它们不在同一个块级格式化上下文时它们的边距就不会折叠。因此，阻止外边距折叠只需产生新的 BFC

//HTML
<div class="container">
  <p>1</p>
  <div class="newBFC">
      <p>2</p>
  </div>
</div>

//CSS
.container{
  display:table;
}

p{
  background-color:pink;
  width:200px;
  height:200px;
  margin:50px 0;
  text-align:center;
  line-height:200px;
}

.newBFC{
  display:table;
}

在这里插入图片描述

2.BFC可以包含浮动元素

这也正是使用 overflow: hidden 与 overflow: auto 方法闭合浮动的原理，使用 overflow: hidden 或 overflow: auto 触发浮动元素的父元素的 BFC 特性，从而可以包含浮动元素，闭合浮动。

//HTML
<div class="container">
  <div>1</div>
  <div>2</div>
</div>

//CSS
.container{
  background-color:lightgreen;
}

.container div{
  background-color:pink;
  float:left;
  margin:10px;
  width:100px;
  height:100px;
}

在这里插入图片描述
父容器将不会有任何的高度，它将不会包含已经浮动的子元素。为了解决这个问题，我们通过添加overflow: hidden，在容器中创建一个新的BFC。

//修改后的CSS
.container{
  background-color:lightgreen;
  overflow:hidden;
}

.container div{
  background-color:pink;
  float:left;
  margin:10px;
  width:100px;
  height:100px;
}

在这里插入图片描述
现在，这个容器将包含浮动的子元素，它的高度将扩展到可以包含它的子元素，在这个BFC，这些元素将会回到页面的常规文档流。

3.BFC 可以阻止元素被浮动元素覆盖

//HTML
<body>
<div class="section"></div>
<div class="aside"></div>
</body>

//CSS
body{
  width:300px;
}

.section{
  width:100px;
  height:100px;
  float:left;
  background:pink;
}

.aside{
  height:150px;
  background:lightgreen;
}

在这里插入图片描述
浮动元素的块级兄弟元素会无视浮动元素的位置，尽量占满一整行，这样就会被浮动元素覆盖，为该兄弟元素触发 BFC 后可以阻止这种情况的发生。

body{
  width:300px;
}

.section{
  width:100px;
  height:100px;
  float:left;
  background:pink;
}

.aside{
  height:150px;
  background:lightgreen;
  overflow:hidden;
}

在这里插入图片描述

4.在多列布局中使用BFC

如果我们正在创建的一个多列布局占满了整个容器的宽度，在某些浏览器中最后一列有时候将会被挤到下一行。会发生这样可能是因为浏览器舍入（取整）了列的宽度使得总和的宽度超过了容器的宽度。然而，如果我们在一个列的布局中建立了一个新的BFC，它将会在前一列填充完之后的后面占据所剩余的空间。

//HTML
<div class="container">
  <div class="column">column 1</div>
  <div class="column">column 2</div>
  <div class="column c3 bfc">column 3</div>
</div>

//CSS
.column {
  width: 31.33%;
  background-color: green;
  float: left;
  min-height: 100px;
  margin: 0 1.5%;
}

在这里插入图片描述

.column {
  width: 31.33%;
  background-color: green;
  float: left;
  min-height: 100px;
  margin: 0 1.5%;
}
.column:last-child { 
  float: none; 
  overflow: hidden; 
}

在这里插入图片描述

weixin_41959367

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
BFC(块级格式化上下文)

BFC(块级格式化上下文)文章目录BFC(块级格式化上下文)css的定位方式：什么是BFC?如何触发BFC？BFC的特性1.BFC会阻止外边距折叠2.BFC可以包含浮动元素3.BFC 可以阻止元素被浮动元素覆盖4.在多列布局中使用BFCcss的定位方式：普通流(Normal Flow)在普通流中，元素按照其在 HTML 中的先后位置至上而下布局，在这个过程中，行内元素水平排列，直到当行被占满然后换行，块级元素则会被渲染为完整的一个新行，除非另外指定，否则所有元素默认都是普通流定位，也可以说，普
复制链接

扫一扫