带你十分钟了解BFC(渡一教育笔记)
发布时间
阅读量：
阅读量
文章目录
-
- BFC简介
- 创建BFC
- BFC特性
- 结语
BFC简介
它是一块独立的渲染区域,它规定了在该区域中,常规流块盒的布局
创建BFC
对于BFC渲染区域：该特定HTML元素将会在其内部生成相应的BFC区域。
根元素
浮动和绝对定位元素(包括固定定位)
overflow不等于visible的块盒
display设置为inline-block或者inline-table或flex
BFC特性
生成BFC元素时, 必须通过动态计算机制来确定其高度, 利用该特性能够有效规避这个问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container{
background-color: lightblue;
}
.item{
float: left;
width: 200px;
height: 200px;
background-color: #008c8c;
margin: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
<script>
</script>
</html>
<style>
.container{
// 注意:此处最好使用overflow hidden来创建BFC,虽然定位和浮动也可以,但会产生副作用。
overflow: hidden;
background-color: lightblue;
}
.item{
float: left;
width: 200px;
height: 200px;
background-color: #008c8c;
margin: 20px;
}
</style>
由上图可见，在未预先为子元素添加浮动样式的情况下，在父盒中会导致整体缩进至零高度；而一旦在父盒中生成BFC样式后，则会根据子元素的浮动设置自动计算出合理的盒子大小。
- 创建BFC的元素,他的边框盒不会与浮动元素重叠
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container{
height: 500px;
background-color:#008c8c;
}
.item{
float: left;
width: 200px;
height: 200px;
background-color: red;
margin: 20px;
}
</style>
</head>
<body>
<div class="item"></div>
<div class="container">
</div>
</body>
<script>
</script>
</html>
<style>
.container{
overflow:hidden
height: 500px;
background-color:#008c8c;
}
.item{
float: left;
width: 200px;
height: 200px;
background-color: red;
margin: 20px;
}
</style>
未建立完整前,(.container)始终忽视了浮动属性,而一旦建立了BFC框架,该容器会主动规避掉浮动元素(.item).这种行为的根本原因在于,BFC作为一个独立自主运行的机制
- 当生成BFC的元素时，默认情况下它们不会被与子项组合在一起（这表明，在同一层次的BFC中 margin可能会产生叠加效果）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container{
margin-top: 20px;
height: 500px;
background-color:#008c8c;
}
.item{
height: 200px;
background-color: red;
margin: 50px;
}
</style>
</head>
<body>
<div class="container">
<div class="item"></div>
</div>
</body>
<script>
</script>
</html>
<style>
.container{
overflow: hidden;
margin-top: 20px;
height: 500px;
background-color:#008c8c;
}
.item{
height: 200px;
background-color: red;
margin: 50px;
}
</style>
通过对比观察上方两张图片后发现，在第一张图中两个盒子由于被包含在同一父容器（如容器.BFC）内而实现了外边距的融合。相比之下，在第二张图中这两个子容器分别由不同的父容器包裹（如容器.BFC和子容器.item.BF），因此它们各自独立而不共享样式设置
生成BFC元素，并阻止了其内部与外部之间的关联。其内部渲染对外部没有影响。
结语
如果文章之中有错误之处,欢迎各位大佬指正哦,一起学习~
全部评论 (0)
还没有任何评论哟~