摘要：必须表现为一块一块的，才能给出一个隔离的空间。触发的具体条件光有的潜质，不代表就直接会触发。最后，一般设置最常用的就是给盒子加上因为这样的写法基本上不会对原有的其他样式产生影响。
BFC 即为Block formatting context 的缩写，BFC 主要用来将一个盒子设置为一个隔离的容器，不管盒子内部的元素具有什么属性，都不会影响到盒子的外面。
不是所有的元素都能产生BFC的，只有display 属性为 block, list-item, table 的元素，才可以产生BFC。
这点其实根据BFC的主要作用应该可以很形象的理解。“必须表现为一块一块的，才能给出一个隔离的空间“。
光有BFC的潜质，不代表就直接会触发BFC。触发BFC 需要至少满足下列条件中的一条：
正常情况下当父盒子不给出高度时，子盒子的高度会将把父盒子自动撑开来，让父盒子具有高度。
而如果子元素都具有浮动时，父盒子就不会被撑开。这时使父盒子具有BFC属性即可同时计算浮动盒子的高度
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Documenttitle>
<style>
.fa {
width: 200px;
margin: 100px auto;
border: 2px solid red;
background-color: aqua;
}
.fa div {
width: 100px;
height: 100px;
float: left;
border: 2px solid yellowgreen;
background-color: deeppink;
}
.fa .son2 {
border: 2px solid grey;
background-color: hotpink;
}
style>
head>
<body>
<div class="fa">
<div class="son1">div>
<div class="son2">div>
div>
body>
html>
View Code
在父盒子没有触发BFC时，显示的结果如下
而通过2中的方法，给.fa 添加BFC （例如增加一句overflow: hidden;）效果如下
根据上述的3-（2）所说，BFC内部的相邻的两个盒子的margin值会重叠，那么如果不属于同一个BFC则可以解决这个问题
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Documenttitle>
<style>
.fa {
width: 200px;
margin: 100px auto;
height: 400px;
border: 2px solid red;
background-color: aqua;
overflow: hidden;
}
.son1,
.son2 {
width: 100px;
height: 100px;
border: 2px solid yellowgreen;
background-color: deeppink;
}
.son1 {
margin-bottom: 50px;
}
.son2 {
margin-top: 100px;
border: 2px solid grey;
background-color: hotpink;
}
style>
head>
<body>
<div class="fa">
<div class="son1">div>
<div class="son2">div>
div>
body>
html>
View Code
同一个BFC下，.son1的下边距为50px .son2的上边距为100px 按照我们一般想要的结果是，.son1 与.son2 之间的距离为150px；
而实际效果入下：
可以很明显看出，他们之间的距离只有100px，他们的margin重叠了。
如果给.son1 外边在嵌套一个BFC 则 .son1 与.son2，不属于同一个BFC就不会产生这个情况 结果如下：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Documenttitle>
<style>
.fa {
width: 200px;
margin: 100px auto;
height: 400px;
border: 2px solid red;
background-color: aqua;
overflow: hidden;
}
.son1,
.son2 {
width: 100px;
height: 100px;
border: 2px solid yellowgreen;
background-color: deeppink;
}
.bfc {
overflow: hidden;
}
.son1 {
margin-bottom: 50px;
}
.son2 {
margin-top: 100px;
border: 2px solid grey;
background-color: hotpink;
}
style>
head>
<body>
<div class="fa">
<div class="bfc">
<div class="son1">div>
div>
<div class="son2">div>
div>
body>
html>
View Code
一个父盒子内部有两个子盒子，如果第一个子盒子有浮动，而第二个子盒子没有浮动，则第一个子盒子会盖在第二个盒子上面。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Documenttitle>
<style>
.fa {
width: 400px;
margin: 100px auto;
height: 400px;
border: 2px solid red;
background-color: aqua;
}
.son1 {
width: 100px;
height: 100px;
border: 2px solid yellowgreen;
background-color: deeppink;
float: left;
}
.son2 {
height: 200px;
border: 2px solid grey;
background-color: hotpink;
}
style>
head>
<body>
<div class="fa">
<div class="son1">div>
<div class="son2">这里有一大段文字这里有一大段文字这里有一大段文字这里有一大段文字这里有一大段文字这里有一大段文字这里有一大段文字这里有一大段文字这里有一大段文字这里有一大段文字这里有一大段文字这里有一大段文字这里有一大段文字这里有一大段文字div>
div>
body>
html>
View Code
如果给第二个子盒子（.son2{overflow:hidden}）添加BFC，则第二个盒子会紧贴着浮动盒子的右侧，并且由于第二个子盒子没有宽度，所以他的宽度会自适应剩余大小。
最后，一般设置BFC最常用的就是给盒子加上 overflow: hidden; 因为这样的写法基本上不会对原有的其他样式产生影响。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/1739.html
摘要：并最终窗体自上而下分成一行行，并在每行中从左至右的顺序排放元素。宋体清除浮动这是专业术语，其实就是需要我们解决浮动带来的影响宋体父元素的高度塌陷宋体。相对定位的参考点是自身。 一、浮动 1.1 各个语言的主要知识点 HTML：标签语义化(那么怎么样布局才是合理的?没有绝对的对和错) CSS： 样式： 布局： 标准流(标准文档流、普通文档流)：盒子模型(width/height...
摘要：为了实现文字环绕效果，规范规定的措施是使父容器塌陷，元素脱离文档流浮动，元素周围的内容转换为围绕元素排列。从浮动的起因和浮动的实现后果来看，浮动不适合用于大范围的布局，更适合利用其特性实现一些小范围的流体布局效果。 张鑫旭的CSS深入理解之float浮动学习笔记 float的历史 float为产生文字环绕效果而生 float的特性 — 包裹和破坏 包裹：即产生一个BFC破坏：使父容器...
摘要：张鑫旭的深入理解之学习笔记基本属性属性介绍默认当与值相同时，等同于当与值不相同时，其中一个值被赋予时，若另一个值为，那这个会被重置为作用前提元素非对应方位的尺寸限制拉伸对于单元格等需要为状态才可以与滚动条页面默认滚动条来自与无 《张鑫旭的CSS深入理解之overflow》学习笔记 overflow基本属性 overflow属性介绍 overflow: visible(默认)|hidd...
摘要：张鑫旭的深入理解之学习笔记与容器的尺寸可视尺寸对于没有设定的块元素，可改变元素水平方向的可视尺寸占据尺寸对于元素，可改变元素水平垂直方向的占据尺寸与百分比单位普通元素的百分比都是相对于容器的宽度计算的绝对定位元素的百分比是相对于包含块的宽 张鑫旭的CSS深入理解之margin学习笔记 margin与容器的尺寸 可视尺寸：对于没有设定width的块元素，margin可改变元素水平方向...
摘要：内部样式表内部样式表一般写在头部，在标签内用标签括起来。外部样式表外部样式表是单独将样式写到一个文件中，并在头部引用。使用外部样式表时要注意如果出现多重样式时样式覆盖带来的问题。CSS 引入共有三种方式：内部样式表，内联样式（行内样式）表，外部样式表，当然也可以使用多重样式 内联样式 内联样式表 内联样式 直接把样式卸载html代码行内，一般仅仅在此样式仅仅只在当前元素上应用时使用，其他...
阅读 654·2023-04-25 19:43
阅读 3834·2021-11-30 14:52
阅读 3711·2021-11-30 14:52
阅读 3775·2021-11-29 11:00
阅读 3732·2021-11-29 11:00
阅读 3789·2021-11-29 11:00
阅读 3516·2021-11-29 11:00
阅读 5934·2021-11-29 11:00
