BFC详解
1.界说：FC的全称为Formatting Conttext,元素在尺度流里面
块级元素的布局属于Block Formatting Context(BFC)——即block level box都是BFC中布局
行内级元素的布局属于Inline Formatting Context (IFC)
2.那么在哪些情况下会创建BFC？
[*]根元素(<html>)
[*]浮动元素（元素的float不是none)
[*]绝对定位元素（元素的position为absolute或fixed)
[*]行内块元素(元素的display为inline-block)
[*]overflow盘算值(Computed)不为visible的块元素
[*]弹性元素（display为flex或inline-flex元素的直接子元素)
3.BFC特点：
[*]在BFC中，box会在垂直方向上一个挨着一个的排布
[*]垂直方向的间距由margin属性决定
[*]在同一个BFC，相邻两个box之间的margin会折叠
[*]在BFC中，每个元素的左边缘是紧挨着包含块的左边缘的
4.BFC作用：
[*]办理边距重叠标题
[*]办理高度塌陷标题
5.BFC如何办理边距重叠标题？
给box1的父盒子设置一个overflow: auto;box1在container的BFC里面，box2还在html的BFC里面→两两互不影响
<!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>
.container {
overflow: auto;
}
.box1 {
width: 500px;
height: 200px;
background-color: #582a2a;
margin-bottom: 20px;
}
.box2{
width: 500px;
height: 200px;
background-color: #582a2a;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="box1"></div>
</div>
<div class="box2"></div>
</body>
</html> 6.BFC如何办理高度塌陷标题？
(1)BFC办理高度塌陷必要满意两个条件：
[*]浮动元素的父元素触发BFC，形成独立的块级格式化上下文
[*]浮动元素的父元素的高度是auto
(2)BFC高度是auto的情况下，如何盘算高度？
[*]如果是inline-level,是行高的顶部和底部的间隔
[*]如果有block-level,是由最顶层的块上边缘和最底层块盒子的下边缘之间的间隔
[*]如果有绝对定位元素，将被忽略
[*]如果有浮动元素，那么增加高度以包罗这些浮动元素的下边缘
<!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>
.container {
background-color:pink;
/* 触发BFC */
overflow: auto;
}
.item{
width: 500px;
height: 200px;
border: 1px solid #000;
float: left;
background-color: #ff0;
}
</style>
</head>
<body>
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
</html>
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]