BFC-前端日常总结
一、 BFC的概念
英文全名：Block Formatting Context 中文理解：块级格式化上下文
二、如何形成BFC？满足一下条件之一，形成BFC。
- 浮动元素：float除了node以外的值。
- 定位元素：position(absolute,fixed)
- display:inline-block,table-cell,table-caption之一
- overflow：为visible除外的值(hidden,scroll)
BFC渲染规则
- 在BFC垂直方向的边距发生重叠
- BFC的区域不会与浮动元素的box重叠
- BFC在页面是一个独立的容器，外面的元素不会影响里面的 元素，里面的元素页不会影响外面的元素
- 计算BFC高度的时候，浮动元素也会参与计算
使用形成BFC条件之一的overflow来解决下面场景的问题
代码如下，运行可以查看效果：
<!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>BFC解决各种布局问题</title>
<style>
*{
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<h5> 场景一：在同一个BFC里面，兄弟子块元素会发生外边距重叠</h5>
<style>
h5{
text-align: center;
margin:50px 0 20px 0;
}
.layout{
width: 100%;
overflow: hidden;
background-color: red;
}
.box{
margin: 5px;
height: 50px;
background-color: palegreen;
}
.layout-help{
background-color: green;
}
.box-help{
overflow:hidden;
}
</style>
<div class="layout">
<!-- 每个box的margin都为5px，则正常我们想box之间距离10px，但是结果渲染到浏览器上确实5px; -->
<p class="box"></p>
<p class="box"></p>
<p class="box"></p>
</div>
<h5>解决方案：给该子元素加个BFC父级元素</h5>
<div class="layout-help">
<p class="box"></p>
<p class="box"></p>
<div class="box-help">
<p class="box"></p>
</div>
</div>
<h5>场景二：父子元素之间发生外边距重叠</h5>
<style>
.layout2{
background-color: rgb(17, 216, 150);
}
.box2{
height: 50px;
margin-top: 20px;
background-color: brown;
}
.layout2-help{
background-color: rgb(17, 216, 150);
overflow: hidden;
}
</style>
<div class="layout2">
<!-- box2设置了 margin-top: 20px;想距离父级元素20px，但根据样式代码，在浏览器上渲染的结果是 box2顶部和父级元素没有距离。 -->
<p class="box2"></p>
</div>
<h5>解决方案：把父级元素变成BFC</h5>
<div class="layout2-help">
<p class="box2"></p>
</div>
<h5>场景三：浮动元素与块级元素发生重叠</h5>
<style>
.layout3{
width: 100%;
background-color: tomato;
}
.float3{
width: 100px;
height: 50px;
background-color: teal;
float: left;
}
.box3{
height: 200px;
background-color: yellow;
}
.box3-help{
height: 200px;
background-color: yellow;
overflow: hidden;
}
</style>
<div class="layout3">
<!-- float3元素向左浮动后，box3元素高度大于float3高时，box3可以跑到float3元素的下侧
场景：如果我们不想让box3跑到float3下侧时，怎么处理呢？
-->
<div class="float3"></div>
<div class="box3"></div>
</div>
<h5>解决方案：box3元素变成BFC</h5>
<div class="layout3">
<div class="float3"></div>
<div class="box3-help"></div>
</div>
<h5>场景四：浮动元素会导致父级元素高度宽度撑不起</h5>
<style>
.layout4{
background-color: tomato;
}
.float4{
width: 100%;
height: 100px;
margin-top: 20px;
background-color: yellowgreen;
float: left;
}
.layout4-help{
background-color: tomato;
overflow: hidden;
}
</style>
<div class="layout4">
<!-- 等float4浮动起来的时候，layout4元素没有根据float4元素的大小撑开
场景：laout4元素页跟着撑开怎么设置呢？ -->
<div class="float4"></div>
</div>
<h5>解决方案：父级元素变成BFC</h5>
<div class="layout4-help">
<div class="float4"></div>
</div>
</body>
</html>
