关于 BFC 的布局应用：清除浮动、文字环绕
参考文档：理解CSS中BFC
BFC（Block Formatting Context）块级格式化上下文
是一个独立的渲染区域，决定了其子元素将如何定位，以及和其他元素的关系和相互作用，BFC 只有 Block-level box 参与， 它规定了内部的 Block-level Box 的布局效果，并且与这个区域外部毫不相干，默认情况下只有根元素（即body）一个块级上下文。
创建依据：HTML 盒子(div) 什么情况下属于 BFC
- 默认情况下：根元素
- float 不为 none
- overflow不为 visible
- position 不为 static、relative
- display 为 inline-block, table-cell, table-caption, flex, inline-flex 五个之一
BFC 布局应用和规则：
-
自动换行
内部的Box会在垂直方向，一个接一个地放置， flex, inline-flex 弹性盒模型不会自动换行。
-
margin 上下外边距折叠
前提是在同一个BFC内，两个相邻 Box 的margin会发生重叠，当兄弟元素的外边距不一样时，将以最大的那个外边距为准，如果在不同的BFC容器内，就不会发生外边距折叠。
-
设置和清除文字环绕，自适应两栏布局
每个元素的 margin box 的左边， 与包含块 border box 的左边相接触(对于从左往右的格式化，否则相反)，即使存在浮动也是如此，除非在这个 BFC 里面创建了一个新的 BFC（unless the box establishes a new block formatting context）。 而在 BFC 和常规文件流中，文本的 line boxes （文本行） 会因为浮动元素的占据，而收缩空间，当排列到浮动元素没有的区域，就又会紧贴着容器边框。但是，p 标签的背景一直是紧贴着 BFC 容器边框。如果要 p 标签整个一起（包括背景）都不再处于浮动元素的下面，不再紧挨着容器块的左边缘，就需要将 p 标签创建成一个新的 BFC ，比如通过给 p 标签添加
overflow: hiddenl;来创建一个新的 BFC ，从而解决文字环绕问题。 -
BFC的区域不会与float box重叠。
-
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
-
消除子元素浮动
计算BFC的高度时，浮动元素也参与计算，因此可以通过overflow: hidden; 来创建 BFC 使其父容器包含浮动的子元素
应用1 清除内部浮动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.container{
/* 外层的 div 不能设置高度否则不能消除越界*/
/* height:10px;*/
border: 1px solid black;
background: red;
}
.item{
width: 30px;
border: 1px solid black;
background: yellow;
float: left;
}
</style>
</head>
<body>
<div class="container">
<div class="item"> 1</div>
<div class="item"> 1</div>
</div>
</div>
</body>
</html>
外层的 div 不能设置高度否则不能消除越界
由于 item 设置了浮动，脱离文件流，而导致 container 没有将其包含，只显示出了黑色边框
<style>
.container{
/* 但是如果父容器没有设置高度，它将不会包含已经浮动的子元素，为了能够父容器自动包含，则需要通过创建一个新的 BFC 来消除浮动，使其高度可以扩展到能包含它的子元素，同时在这个 BFC，这些元素将会回到页面的常规文档流 */
overflow: hidden; /* creates a block formatting context */
/* float 不为 none 时，container 是 BFC */
}
</style>
清除浮动后，父容器自动包含子元素
应用2 设置和清除文字环绕
在某些网页中，图片和文字的不同排版，可以通过设置 BFC 来处理。
image-20190111165546079
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.container{
width: 200px;
border: 1px solid black;
}
.floated{
background: white; /* 浮动元素背景为 白色*/
opacity: 0.8;
float: left; /* 设置 图片浮动到左上角*/
}
p{
background: red; /* 文本元素背景为 红色*/
margin:0; /* 去掉 p 标签的上下边距*/
}
</style>
</head>
<body>
<div class="container">
<div class="floated">Floated div</div>
<p>Quae hic ut ab perferendis sit quod architecto,dolor debitis quam rem provident aspernatur tempora expedita.</p>
</div>
</body>
</html>
设置文字环绕
<style>
p{
background: red; /* 文本元素背景为 红色*/
margin:0;
overflow: hidden; /* 根据创建依据 3 ，creates a new BFC */
}
</style>
消除文本环绕，做出自适应两栏布局
网友评论