BFC block formatting contexts
概念
块级元素的独立渲染区域
触发条件
1.根元素 2.float不为none 3.overflow不为visible
4.dispaly:inline-block/table-cell/table-caption/flex/inline-flex
5.position:absolute/fixed
特性和应用
1.Box垂直方向的距离由margin决定,属于同一个BFC的两个相邻box的margin会发生重叠(应用:防止margin重叠)
<style>
.box1{
width: 200px;
height: 200px;
background-color: orange;
margin-bottom: 30px;
}
.box2{
width: 200px;
height: 200px;
background-color: green;
margin-top: 40px;
}
.boxs{
/* overflow: scroll; */
/* float: left; */
display: inline-block;
}
</style>
<body>
<!-- Box垂直方向的距离由margin决定,属于同一个BFC的两个相邻box的margin会发生重叠 -->
<!-- 属于同一个BFC的两个相邻box的margin会发生重叠 -->
<div class="box1">1</div>
<div class="boxs">
<div class="box2">2</div>
</div>
</body>
<!--
按照现在的显示结果,margin的上下间距重叠,原因是因为box1和box2都在html里面,而html就是当前文档的根元素,这个根元素默认就是BFC,box1和box2都是在HTML里面的,所以属于同一个BFC的两个相邻box的margin会发生重叠
当给box2添加了父元素boxs且添加了overflow之后,该父元素boxs就是BFC了,这个时候,box2属于boxs这个BFC,而box1属于HTML这个BFC,他们2个属于不同的BFC,所以不会发生重叠
-->
2.BFC的区域不会与float box发生重叠(应用:自适应两栏布局)
两栏布局,需要2栏不重叠,且左边的盒子宽度固定是100,右边的盒子宽度自适应
<style>
body{
margin: 0;
}
.left{
width: 100px;
height: 300px;
background: orange;
float: left;
/* position: absolute; */
}
.right{
height: 700px;
background: skyblue;
/* 方法1:是因为触发了right为BFC,BFC区域不会与浮动盒子发生重叠 */
/* overflow: hidden;
overflow: auto;
overflow:scroll; */
/* display: flex; */
/* 方法2:
width: calc(100% - 100px);
float: left; */
/* 方法3: */
margin-left: 100px;
}
</style>
<body>
<div class="left">左边的</div>
<div class="right">右边的</div>
</body>
三栏自适应左右两栏固定宽高,中栏自适应
<style>
body{
margin: 0;
}
/* 方法1:
.left{
width: 100px;
height: 200px;
background: orange;
float: left;
}
.center{
height: 300px;
background: blue;
margin-left: 100px;
margin-right: 200px;
}
.right{
width: 200px;
height: 200px;
background: green;
float: right;
}
*/
/* 方法2:
.left{
width: 100px;
height: 200px;
background: orange;
float: left;
}
.center{
height: 300px;
background: blue;
margin-left: 100px;
margin-right: 200px;
}
.right{
width: 200px;
height: 200px;
background: green;
position: absolute;
right: 0;
top: 0;
}
*/
/* 方法3
.left{
width: 100px;
height: 200px;
background: orange;
float: left;
}
.center{
height: 300px;
background: blue;
方法3 width: calc(100% - 300px);
float: left;
方法4
overflow: hidden;
}
.right{
width: 200px;
height: 200px;
background: green;
float: right;
}*/
/* 方法5 */
.left{
width: 100px;
height: 200px;
background: orange;
float: left;
}
.center{
height: 300px;
background: blue;
position: absolute;
left: 100px;
width: calc(100% - 300px);
}
.right{
width: 200px;
height: 200px;
background: green;
float: right;
}
</style>
<body>
<!-- 方法1: -->
<!-- <div class="left">左边的</div>
<div class="right">右边的</div>
<div class="center">中间的</div> -->
<!-- 方法2 -->
<!-- <div class="left">左边的</div>
<div class="center">中间的</div>
<div class="right">右边的</div> -->
<!-- 方法3 -->
<!-- <div class="left">左边的</div>
<div class="right">右边的</div>
<div class="center">中间的</div> -->
<!-- 方法4 -->
<div class="left">左边的</div>
<div class="center">中间的</div>
<div class="right">右边的</div>
</body>
双飞翼
<style>
body{
margin: 0;
}
.content div{
float: left;
}
.left{
width: 100px;
height: 200px;
background: orange;
margin-left: -100%;
}
.right{
width: 100px;
height: 200px;
background: blue;
margin-left: -100px;
}
.center{
height: 300px;
background: skyblue;
width:100%;
}
.middle{
height: 300px;
background: yellow;
margin-left: 100px;//使用定位
width: calc(100% - 200px);
}
</style>
<body>
<div class="content">
<div class="center">
<div class="middle">中间的</div>
</div>
<div class="left">左边的</div>
<div class="right">右边的</div>
</div>
</body>
圣杯
<style>
body{
margin: 0;
}
.content{
padding-left: 100px;
padding-right: 100px;
}
.content div{
float: left;
}
.left{
width: 100px;
height: 200px;
background: orange;
margin-left: -100%;
position:absolute;
left: 0;
}
.right{
width: 100px;
height: 200px;
background: blue;
position:absolute;
right: 0;
}
.center{
height: 300px;
background: skyblue;
width:100%;
}
</style>
<body>
<div class="content">
<div class="center">中间的</div>
<div class="left">左边的</div>
<div class="right">右边的</div>
</div>
</body>
3.计算BFC的高度时,浮动元素也参与计算(应用:清除内部浮动)
<style>
body,p{
margin: 0;
}
div{
border: 2px solid blue;
/* overflow: scroll; */
/* float: left; */
/* display: table-cell; */
/* display: inline-block; */
/* display: flex; */
/* position: absolute; */
position: fixed;
}
p{
width: 100px;
height: 100px;
background: orange;
float: left;
}
</style>
<body>
<!-- 计算BFC的高度时,浮动元素也参与计算(应用:清除内部浮动) -->
<div>
<p>1</p>
<p>2</p>
<p>3</p>
</div>
</body>
4.BFC内部的Box会在垂直方向,一个接一个的放置。
5、每个元素的margin box的左边会与包含块border box的左边相接触(对于从左到右的格式化,否则相反),即使存在浮动也会如此。
6、BFC就是页面上的一个独立容器,容器里面的元素不会影响到外面的元素