BFC (Block formatting context) 直译为”块级格式化上下文”。它是一个独立的渲染区域,只有
Block-level box
参与, 它规定了内部的Block-level Box
如何布局,并且与这个区域外部毫不相干。
BFC的生成
CSS2.1中规定满足下列CSS声明之一的元素便会生成BFC
- 根元素
- float属性不为 none
- position 为 absolute 或 fixed
- display 为 inline-block,table-cell,table-caption,flex,inline-flex
- overflow不为visible
BFC布局规则:
- 内部的Box会在垂直方向,一个接一个地放置。
- Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
- 每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。
- BFC的区域不会与float box重叠。
- BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。
- 计算BFC的高度时,浮动元素也参与计算
可以跟前面学习过的CSS盒模型规则做个比较:
CSS盒模型规则:
- 外边距合并现象:在默认布局的垂直方向上,默认情况下外边距是不会叠加的,会出现合并现象,谁的外边距比较大,就听谁的
- 浮动元素会尽量接近往左上方(或右上方)
- 为父元素设置
overflow:hidden
或浮动父元素,则会包含浮动元素
BFC的应用:
1. 防止margin重叠(布局规则第二条)
<style>
html,*{
padding: 0;margin: 0;
}
p{
width: 100px;
height: 100px;
background-color: pink;
margin: 100px;
text-align: center;
}
</style>
<body>
<p>p1</p>
<p>p2</p>
</body>
我们可以在p外面包裹一层容器,并触发该容器生成一个新BFC。那么两个P便不属于同一个BFC,就不会发生margin重叠了。
<style>
/*这里只写了和上面代码新增的div的设置,其他同上*/
div{
overflow: hidden;
}
</style>
<body>
<p>p1</p>
<div>
<p>p2</p>
</div>
</body>
块级元素:独占一行。如果没有设置宽度,默认和父元素一样宽;如果设置了宽高,则按设置的来显示。
行内元素:不会独占一行。不可以设置宽度。默认和内容一样宽。
行内块级元素:元素既不独占一行,又可以设置宽高。
通过设置元素的display
属性来实现元素模式的转换:
- display :block;块级元素
- display :inline;行内元素
- display :inline - block;行内块级元素
若是水平方向或者嵌套关系发生重叠现象,则可以通过给父元素设置display:inline-black
来解决问题。
2. 自适应多栏布局(布局规则第三、四条)
自适应两栏布局
<style>
*{
margin: 0;
padding: 0;
}
body{
width: 300px;
position: relative;
}
.aside{
width: 100px;
height: 150px;
float: left;
background: yellow;
}
.main{
height: 200px;
background: red;
}
</style>
<body>
<div class="aside"></div>
<div class="main"></div>
</body>
效果如图:
给.main
设置overflow:hidden;
属性之后:
当触发.main
生成BFC后,这个新的BFC不会与浮动的.aside
重叠。因此会根据包含块的宽度,和aside的宽度,自动变窄。
自适应三栏布局
<style>
div{
height:200px;
}
.left{
float:left;
width:180px;
background-color:red;
margin-right:10px;
}
.right{
float:right;
width:180px;
background-color:blue;
margin-left:10px;
}
.content{
background-color:yellow;
overflow:hidden;
}
</style>
<body>
<div class="container">
<div class="left">
<div class="right">
<div class="content">
</div>
</body>
效果如图:
3. 清除浮动(布局规则第六条)
<style>
*{
margin:0;
padding:0;
}
.box1{
background-color: red;
overflow: hidden;
}
.box2{
background-color: blue;
}
.box1 p{
width: 100px;
background-color: yellow;
}
.box2 p{
width: 100px;
background-color: pink;
}
</style>
<body>
<div class="box1">
<p>我是文字1</p>
<p>我是文字2</p>
</div>
<div class="box2">
<p>我是文字1</p>
<p>我是文字2</p>
</div>
</body>
效果如图:
给所有的 p
元素设置float:left;
后:
当给第一个div box1
设置 overflow:hidden
之后:
参考1:https://juejin.im/entry/59c3713a518825396f4f6969
参考2:http://www.php.cn/css-tutorial-382041.html