说明BFC

digking
187 阅读4分钟

总结元素开启 BFC 的特点：

  1. 开启BFC的元素不会被浮动的元素覆盖 ( Demo02 > 情况3：开启BFC的情况：父元素设置浮动)
  2. 开启BFC的元素可以包裹浮动的子元素，避免高度塌陷 （Demo02）
  3. 开启BFC的元素子元素和父元素外边距不会重叠 （ Demo03）

解决因子元素浮动导致高度塌陷：

  1. 设置父元素浮动
  2. 设置 overflow:hidden

解决父子元素垂直外边距重叠：

  1. 设置父元素 border 属性
  2. 设置父元素 overflow:hidden

总结元素开启 BFC 的方式：

  1. 设置父元素浮动
  2. 设置 overflow:hidden
  3. 设置父元素 border 属性

创建结构class=outer的div,及其子元素class=inner的div

▶Demo01：研究浮动特性

情况1：当子元素inner不设置float:left时

HTML:

<div class="outer">
    <div class="inner"></div>
</div>

CSS:

.outer{
    border: 5px solid red;
}
.inner{
    background-color: #bfa;
    width: 200px;
    height: 200px;

}

image.png 分析: 此时给父元素outer设置边框,高度是由子元素大小撑开的。

情况2：当inner子元素设置 float:left 时

.inner{
    background-color: #bfa;
    width: 200px;
    height: 200px;
    float: left;   /* 新增设置浮动 */

}

image.png 分析: 子元素设置浮动后,脱离文档流,不占据文档流中空间,导致父元素高度塌陷。

情况3：在父元素后加一个div .latter,测试子元素inner设置浮动与否的效果。

<div class="outer">
   <div class="inner"></div>
</div>
<!-- 新增 div .latter -->
<div class="latter"></div> 

.latter{
   background-color: #ddaacc;
   width: 300px;
   height: 300px;
}

1)子元素inner不设置浮动

image.png 分析:

outer和latter都是div块元素,不设置浮动默认独占一行,latter是指定width和height,而outer是由 子元素inner 大小撑开。

2)子元素inner设置浮动

image.png 分析:

子元素设置float:left后,脱离文档流,不占据文档流空间,父元素高度塌陷,latter就上移动,同时inner也覆盖latter。

▶Demo02：开启BFC的元素可以包裹浮动的子元素，避免高度塌陷

情况1：.没有开启BFC的情况

image.png

情况2：开启BFC的情况：设置 overflow

CSS:

.outer{
   border: 5px solid red;
   /* 新增 设置overflow开启BFC */
   overflow: scroll;
}

效果：

image.png

分析:

给(父)元素设置overflow 非visible 值,可以开启元素的BFC属性,使得元素布局成独一的区域,效果上是可以包裹浮动子元素 ,让父元素高度不再塌陷。

当然,使用scoll会导致出现滚动条,影响页面效果,可以采用overflow:hidden。

因此，常用的方式为元素设置 overflow:hidden 开启BFC,使其可以包裹浮动子元素,避免高度塌陷。

情况3：开启BFC的情况：父元素设置浮动

CSS:

.outer{
    border: 5px solid red;
    /* 新增 设置浮动float开启BFC */
    float: left;
}

效果：

image.png

分析:

给父元素outer设置浮动可以间接的开启BFC,但是开启多少有副作用。

开启BFC后元素从块元素变为行内元素,因此父元素的宽度缩小为子元素的宽度。

这样实现了 开启BFC的元素包裹浮动的子元素。

▶Demo03：开启BFC的元素子元素和父元素外边距不会重叠

情况1：没有设置垂直外边距时

HTML:

<div class="outer">
    <div class="inner"></div>
</div>

CSS

.outer{
    border: 5px solid red;
    background-color: skyblue;
}
.inner{
    background-color: #bfa;
    width: 200px;
    height: 200px;
}

效果：

image.png

分析: 父元素高度正常由子元素大小撑开

情况2：设置垂直外边距时

1)当设置子元素垂直外边距margin,但是不做处理时的元素的布局。

.outer{
    background-color: skyblue;

}
.inner{
    background-color: #bfa;
    width: 200px;
    height: 200px;
    margin-top: 200px; /**  新增外边距margin **/
}

image.png

分析:

默认子元素和父元素的垂直外边距是重叠的,这会导致子元素设置垂直方向外边距marin时,效果上,父元素跟随子元素移动。这样的效果会影响页面布局,必须想办法解决。

2)当给父元素设置border时,子元素margin生效,父元素不会因为外边距重叠影响父元素布局

CSS:

.outer{
    border: 5px solid red; /* 给父元素设置 border */
    background-color: skyblue;
}
.inner{
    background-color: #bfa;
    width: 200px;
    height: 200px;
    margin-top: 200px;  /**  新增外边距margin **/
}

image.png

分析:

当元素设置边框border后,会开启BFC,效果上可以解决父元素因为外边距重叠导致父元素跟着设置垂直外边距的子元素移动的问题。

3)当给父元素设置 overflow:hidden 时,子元素margin生效,父元素不会因为外边距重叠影响父元素布局。

CSS:

.outer{
    background-color: skyblue;
    overflow: hidden;
}
.inner{
    background-color: #bfa;
    width: 200px;
    height: 200px;
    margin-top: 200px;
}

image.png

分析:

当元素设置 overflow:hidden 时,开启了 BFC,效果上可以解决父元素因为外边距重叠导致父元素跟着设置垂直外边距的子元素移动的问题。(和 3)效果一样)

不管是那种方式,最后的目的都是为了开启BFC,开启BFC后,元素就会具备某些效果。

开启BFC的方式有很多,可以查看Block formatting context

相关文章:

  1. Block formatting context
  2. margin系列之外边距折叠
  3. 理解CSS布局和BFC
avatar
文章
阅读
粉丝