面试积累——BFC

什么是BFC

BFC就是“块级格式化上下文”的意思,创建了 BFC的元素就是一个独立的盒子,不过只有Block-level box可以参与创建BFC, 它规定了内部的Block-level Box如何布局,并且与这个独立盒子里的布局不受外部影响,当然它也不会影响到外面的元素。

BFC有一下特性:

  • 内部的Box会在垂直方向,从顶部开始一个接一个地放置。
  • Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生叠加
  • 每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。
  • BFC的区域不会与float box叠加。
  • BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素,反之亦然。
  • 计算BFC的高度时,浮动元素也参与计算。

如何触发BFC

那么我们该怎么使用BFC呢,如何触发BFC呢?:

  • float 除了none以外的值
  • overflow 除了visible 以外的值(hidden,auto,scroll )
  • display (table-cell,table-caption,inline-block, flex, inline-flex)
  • position值为(absolute,fixed)
  • fieldset元素
  • 绝对定位元素(position:absolute 或fixed)
  • 行内块inline-block(元素的display:inline-block)
  • 表格单元格(元素的display:table-ceil,HTML表格默认属性)
  • 弹性盒flex boxes(元素地display:flex或inline-flex)

在以上的情况里可以创建BFC。

哪些场景可以使用BFC

1.解决margin叠加问题

<head>
    <title>title>
    <style type="text/css">
        p{
            margin: 50px;
        }
    style>
head>

<body>
    <p>hello worldp>
    <p>hello worldp>
    <p>hello worldp>
body>

面试积累——BFC_第1张图片
三P每个p之间的距离为50px,发生了外边距叠加。 要解决这个叠加问题即让每个P之间是100px,我们可以新建一个BFC,怎么建呢?可以给p元素添加一个父元素,让它触发BFC。如下:

    <style type="text/css">
    p {
        margin: 50px;
    }
    .bfc{
        /*position: absolute;*/
        overflow: auto;
    }
    style>
head>

<body>
    <div class="bfc">
        <p>hello worldp>
    div>
    <p>hello worldp>
    <p>hello worldp>
body>

第一个盒子就和第二个盒子的边距为100px

面试积累——BFC_第2张图片

不过虽然变成bfc,但是不同的方式也有所不同

.bfc{
        position: absolute;

}

面试积累——BFC_第3张图片

2.用于布局

    <style type="text/css">
        body{
            width: 300px;
            position: relative;
        }
        .aside{
            width: 100px;
            height: 150px;
            float:left;
            background: blue;
        }
        .main{
            height: 200px;
            background: #f00;
        }
    style>
head>
<body>
<div class="aside">div>
<div class="main">div>

这里就会出现这种情况
面试积累——BFC_第4张图片
从图中我们会发现上面BFC的第三个特性,就是元素的左外边距会触碰到包含块容器的做外边框,就算存在浮动也会如此。(这里不太理解)
看上面BFC第四个特性,就是BFC不会与浮动盒子叠加,那么我们是不是可以创建一个新的BFC来解决这个问题呢?来看看:

 .main {
        height: 200px;
                background: #f00;
                overflow:hidden;
}

就解决了上面的问题。发现我们用overflow:hidden触发main元素的BFC之后,效果立马出现了,

3.用于清除浮动,计算BFC高度.

因为上面第六个特性提到计算BFC高度时,浮动元素也会参与计算,我们先看一个例子:

<head>
    <title>title>
    <style type="text/css">
        .bfc{
            border: 5px solid #f00;
            width: 300px;
        }
        .box{
            border: 5px solid blue;
            width: 100px;
            height: 100px;
            float: left;
        }
    style>
head>
<body>
<div class="bfc">
    <div class="box">div>
    <div class="box">div> 
div>
body>
html>

其实我一看这个代码,我就知道会出现bfc撑不起来的问题,因为box设置了float,其实就相当于脱离了流,如果理解正常情况下一个html其实就是一层平地,我们往这里面塞盒子。
先把float注释掉来看效果:

/*float: left;*/

bfc没有设置高度,它的高度是因装的东西而定的,如果就是浏览器默认的static,那么box和bfc在一个平面,就相当于我们往地上扔了一个纸箱子,这个箱子的高度是可以伸缩的。我们再往里面扔两个盒子,这个箱子就扩充起来了。
面试积累——BFC_第5张图片

float: left;

一旦有了这句话就不一样了,这个时候两个盒子被放在了二楼,这个bfc箱子还在一楼,自然就是瘪的了
面试积累——BFC_第6张图片
要如何将这个bfc也放到二楼呢?
那就需要将它变为bfc:就是上面提到的方式

overflow: hidden;
float: left;
position: absolute;
display: flex;

都可以实现,因为这样它就变成了BFC和box并列了,都放到二楼去了。

你可能感兴趣的:(css,面试)