(2019)[前端]面试题[1]:CSS BFC是什么【BFC详解】

无道 2019-09-27 0 条评论 前端相关 阅读390 手机阅读

Hello,欢迎来到我的博客,每天一道面试题,我们共同进步。

问题

CSS BFC是什么?

解答

定义

BFC(Block Formatting Context)格式化上下文,是盒模型的一种渲染布局,简言之可以理解为 一个独立的容器,不受外部影响,不影响外部。

形成条件

  1. 固定(fixed)定位和绝对(absolute)定位
  2. float:both,left,right(除了none)
  3. overflow:hidden,auto,scroll(除了visible)
  4. display:inline-block,table-cell,table-caption

特点

  1. 内部的盒子会以垂直分布
  2. 垂直方向的距离由margin决定
  3. 和float元素区域分割开,不会重叠
  4. 计算BFC高度时,浮动元素高度也计算在内
  5. 独立的渲染容器,不受外部影响,不影响外部

作用

  1. 清除浮动
  2. 消除margin重叠
  3. 布局

实例

A.BFC的盒子对齐

截图-1569583481

可以看出:

1、元素垂直方向布局

2、浮动元素也是垂直方向,且没超过他的前两个兄弟元素

3、虽没超过前两个元素,但是下面的盒子顶上去了

4、全部左对齐

HTML代码

<div class="container">
    <div class="box-1"></div>
    <div class="box-2"></div>
    <div class="box-3"></div>
    <div class="box-4"></div>
</div>

CSS代码

.container {
    position: absolute; /*为了创建BFC环境*/
    background: #ccc;
}

div {
    height: 30px;

}

.box-1 {
    width: 300px;
    background-color: red;
}

.box-2 {
    width: 250px;
    background-color: green;
}

.box-3 {
    width: 200px;
    background-color: blue;
    float: left;
}

.box-4 {
    width: 150px;
    height: 40px;
    background-color: yellow;
}

B.外边距折叠

两个子盒子的垂直距离为20px而不是30px,因为传统的文档流垂直外边距会折叠,间距以较大的为准。【这是规定,如下图】

截图-1569584219

    <div class="container">
        <div class="box1"></div>
        <div class="box2"></div>
    </div>
.container {
    overflow: hidden;
    width: 100px;
    height: 100px;
    background-color: #ccc;
}

.box1 {
    height: 30px;
    margin: 10px 0;
    background-color: green;
}

.box2 {
    height: 30px;
    margin: 20px 0;
    background-color: green;
}

那么有没有方法让垂直外边距不折叠呢?答案是:有。

bfc就是页面上的一个独立容器,容器里面的子元素不会影响外面元素,同样外面的元素不会影响到BFC内的元素。所以就让box1或box2再处于另一个BFC中就行了。

给box1加一个父元素wrap,是wrap满足BFC条件。

截图-1569584525

<div class="container">
    <div class="wrapper">
        <div class="box1"></div>
    </div>
    <div class="box2"></div>
</div>
<style>
.container {
    overflow: hidden;
    width: 100px;
    height: 100px;
    background-color: #ccc;
}

.wrapper {
    overflow: hidden;
    /*BFC*/
}

.box1 {
    height: 30px;
    margin: 10px 0;
    background-color: green;
}

.box2 {
    height: 30px;
    margin: 20px 0;
    background-color: green;
}
</style>

C.不被浮动元素覆盖

不被浮动元素覆盖有很多用处。

且看下面

常见的两栏布局

左边固定宽度,右边不设宽,因此右边的宽度自适应,随浏览器窗口大小的变化而变化。

截图-1569584873

<div class="column"></div>
<div class="column"></div>
.column:nth-of-type(1) {
    float: left;
    width: 200px;
    height: 300px;
    margin-right: 10px;
    background-color: red;
}

.column:nth-of-type(2) {
    overflow: hidden;
    /*创建bfc */
    height: 300px;
    background-color: greenyellow;
}

还有三栏布局

左右两边固定宽度,中间不设宽,因此中间的宽度自适应,随浏览器的大小变化而变化。

截图-1569585045

<div class="contain">
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
</div>
.column:nth-of-type(1),
.column:nth-of-type(2) {
    float: left;
    width: 100px;
    height: 300px;
    background-color: green;
}

.column:nth-of-type(2) {
    float: right;
}

.column:nth-of-type(3) {
    overflow: hidden;
    /*创建bfc*/
    height: 300px;
    background-color: red;
}

防止字体环绕

浮动的盒子会遮盖下面的盒子,但是下面盒子里面的文字不会被遮盖,并且会环绕浮动盒子

截图-1569585407

.left {
    float: left;
    width: 100px;
    height: 100px;
    background-color: yellowgreen;
}

p {
    background-color: blueviolet;
    overflow: hidden;
    /*显示/隐藏此条决定是否环绕(创建了BFC)*/
}
    <div class="left">这是浮动盒子</div>
    <p>浮动的盒子会遮盖下面的盒子,但是下面盒子里面的文字不会被遮盖,并且会环绕浮动盒子
        浮动的盒子会遮盖下面的盒子,但是下面盒子里面的文字不会被遮盖,并且会环绕浮动盒子
        浮动的盒子会遮盖下面的盒子,但是下面盒子里面的文字不会被遮盖,并且会环绕浮动盒子
        浮动的盒子会遮盖下面的盒子,但是下面盒子里面的文字不会被遮盖,并且会环绕浮动盒子
    </p>

截图-1569585464

D.利用BFC清除浮动

截图-1569586247

<div class="container">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</div>
.container {
    width: 300px;
    height: 300px;
    background-color: #eee;
}

div {
    width: 100px;
    height: 100px;
}

.box1 {
    background-color: lightcoral;
}

.box2 {
    float: left;
    background-color: lightgreen;
}

.box3 {
    overflow: hidden;
    /*创建BFC,清除左边(box2的浮动)*/
    background-color: lightsteelblue;
}

总结

看似真的是很小的一个知识点,要理解,要写出这篇文章来,真的要花费不少时间。

加油!!

全文完 [
有帮助?打赏
支付宝打赏
微信打赏
]
修改: 2019-09-29 08:14
这篇文章还没有评论呢~
点击刷新/生成验证码
It's me
昵称:无道
坐标:成都
性别:
一个人,一介学生,一个儿子~ 愿你我都被世界温暖以待
迷思爱 公众号

新建了个公众号,会不定期分享一些小玩意,有提升效率的办公软件、有一些黑科技的软件、或教程等等。

爷~,要不关注下~~