认识BFC:
BFC全称是block fromatting context,中文是“块级格式化上下文”,拥有BFC特性的元素内部子元素的一定不会在布局上影响外部元素,可以理解为BFC为该元素创建了一个封闭空间,元素内外部是互不影响的。
因此:BFC元素一定不会发生margin重叠,因为margin重叠会影响外面的元素
开启BFC也可以用来清浮动,因为子元素浮动会是父元素高度塌陷,势必会影响后面的布局和定位,因为这样才符合BFC的内部子元素不会影响外部元素的设定
怎样触发BFC:
- html根元素
- float的值不为none
- overflow的值为auto、scroll或hidden
- display的值为table-cell、table-caption、inline-block中的任何一个
- position的值不为relative和static
BFC可以做什么
一、实现两栏自适应布局
<style>
*{
padding:0;
margin:0;
}
.box {
width: 300px;
background-color: #bfa;
}
img{
width:60px;
height:60px;
float:left;
background:purple;
}
p{
background:#eee;
}
</style>
</head>
<body>
<div class="box">
<img src="" alt=""></img>
<p>我是要成为海贼王的男人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人</p>
</div>
</body>
先看下表现:
因为给img标签设置了float:left, 导致P标签的内容表现为环绕图片
我们通过上面的介绍了解到,具有BFC特性元素的子元素不会受外部元素影响。同样不会影响外部元素。尝试给P标签添加BFC特性看下效果:
<style>
*{
padding:0;
margin:0;
}
.box {
width: 300px;
background-color: #bfa;
margin:20px;
}
img{
width:60px;
height:60px;
float:left;
background:purple;
}
p{
overflow:hidden;
background:#eee;
}
</style>
</head>
<body>
<div class="box">
<img src="" alt=""></img>
<p>我是要成为海贼王的男人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人</p>
</div>
</body>
发现P标签顺着浮动元素边缘形成了自己的封闭上下文。
也就是说,普通元素在添加了overflow:hidden属性后,会自动填满容器中除了浮动元素之外的剩余空间,从而形成自适应布局,上面代码中无论浮动元素img变大或变小,p标签总是会自适应的发生变化以填满容器的剩余空间
修改img宽度为100:
<style>
*{
padding:0;
margin:0;
}
.box {
width: 300px;
background-color: #bfa;
margin:20px;
}
img{
width:100px;
height:60px;
float:left;
background:purple;
}
p{
overflow:hidden;
background:#eee;
}
</style>
</head>
<body>
<div class="box">
<img src="" alt=""></img>
<p>我是要成为海贼王的男人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人</p>
</div>
</body>
但是,我们发现此时img标签和p标签之间是没有任何间距的,如果想要设置间距,我们可以:
设置左侧浮动元素
margin-right
透明的border-right
透明的padding-right
设置右侧BFC元素
透明border-left
透明padding-left
如果设置margin-left,则值需要是float:left元素宽度 + 间隔值
比如说:想要设置20px间隔,可以这样操作:
img{margin-right:20px;}
img{border-right:20px solid transparent;}
img{padding-right:20px;}
p{border-left:20px solid transparent;}
p{padding-left:20px}
通常给左侧浮动元素设置margin-right更加方便直观
<style>
*{
padding:0;
margin:0;
}
.box {
width: 300px;
background-color: #bfa;
margin:20px;
}
img{
width:100px;
height:60px;
float:left;
background:purple;
margin-right:20px;
}
p{
overflow:hidden;
background:#eee;
}
</style>
</head>
<body>
<div class="box">
<img src="" alt=""></img>
<p>我是要成为海贼王的男人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人</p>
</div>
</body>
二、解决高度塌陷问题
父子元素外边距塌陷:
外边距塌陷计算规则:
同为正值,去较大的值
同为负值,取绝对值大的值
一正一负,取两值相加后的结果
看代码分析一下:
<style>
*{
margin:0;
padding:0;
}
.box{
width:300px;
height:300px;
background:#bfa;
margin:0 auto; //看这里
}
.box1{
width:100px;
height:100px;
background:purple;
margin-top:30px;
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
</div>
</body>
<style>
*{
margin:0;
padding:0;
}
.box{
width:300px;
height:300px;
background:#bfa;
margin:100px auto; //看这里
}
.box1{
width:100px;
height:100px;
background:purple;
margin-top:30px;
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
</div>
</body>
为父元素开启BFC后:
<style>
*{
margin:0;
padding:0;
}
.box{
width:300px;
height:300px;
background:#bfa;
margin:0 auto;
overflow:hidden;
}
.box1{
width:100px;
height:100px;
background:purple;
margin-top:30px;
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
</div>
</body>
兄弟元素外边距塌陷:
同样遵循上面的规则:
<style>
*{
margin:0;
padding:0;
}
.box1{
width:300px;
height:300px;
background:#bfa;
margin-bottom:30px;
}
.box2{
width:300px;
height:300px;
background:purple;
margin-top:20px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
会发现,box1和box2之间的间距是30px,解决方法是在其中某一个盒子外再套一个div,给外层div开启BFC,从而使其内部子元素不影响外部布局
<style>
*{
margin:0;
padding:0;
}
.wrap{
overflow:hidden;
}
.box1{
width:300px;
height:300px;
background:#bfa;
margin-bottom:30px;
}
.box2{
width:300px;
height:300px;
background:purple;
margin-top:20px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="box1"></div>
</div>
<div class="box2"></div>
</body>
记住一个重要的点,BFC会为元素设置一个独立且封闭的空间,开启BFC的元素,其子元素在布局上一定不会影响外部元素,在工作中多去实践