CSS BFC特性和应用

目录

  • 1,介绍
  • 2,BFC布局规则
  • 3,创建BFC
  • 4,BFC应用
    • 1,浮动子元素使父级高度坍塌
    • 2,非浮动元素被浮动元素覆盖
    • 3,margin 合并
      • 1,父子 margin 合并:父级和第1个/最后1个子元素
      • 2,相邻兄弟元素的 margin 合并

1,介绍

BFC 就是页面上一块独立的容器,内部有自己的渲染布局规则。容器内外的元素不会相互影响。

2,BFC布局规则

  1. 内部的元素,在垂直方向上会依次放置。
  2. 元素在垂直方向上的距离由 margin 决定,同一个 BFC 的两个相邻元素的 margin 会重叠。
  3. BFC 区域不会和外部浮动元素重叠。
  4. 计算 BFC 高度时,浮动子元素也参与运算。

在标准流中的根元素 html 就是一个天然的 BFC 环境。

3,创建BFC

简单介绍下最常用的,更多的创建方式参考MDN-BFC。

属性 属性值
float 不为 none
position absolutefixed
display inline-blockflow-rootflexgridtable
overflow 不为 visibleclip 的块级元素

无论哪种方式创建的BFC,都有一定的副作用。

只有 display: flow-root 是无副作用的,它的行为如同 root(在浏览器中是 html )元素

4,BFC应用

1,浮动子元素使父级高度坍塌

<style>
  .container {
    border: 2px solid black;
  }
  .item {
    float: left;
    width: 50px;
    height: 50px;
    background-color: salmon;
  }
style>

<body>
  <div class="container">
    <div class="item">div>
  div>
body>

表现

CSS BFC特性和应用_第1张图片
解决:只需要将父元素设置为 BFC 即可。

.container {
  display: flow-root;
}

CSS BFC特性和应用_第2张图片

2,非浮动元素被浮动元素覆盖

对于浮动元素的特性来说,这是正常现象。

<style>
  .box1 {
    float: left;
    width: 100px;
    height: 100px;
    background-color: rgba(255, 255, 255, 0.75);
    border: 1px solid black;
  }
  .box2 {
    border: 2px solid red;
  }
style>

<body>
  <div class="box1">div>
  <div class="box2">求关注,下雪天的夏风div>
body>

表现:

CSS BFC特性和应用_第3张图片

但我们不想让非浮动元素 box2 被覆盖,所以可设置 box2 为 BFC 来解决。

.box2 {
  display: flow-root;
}

CSS BFC特性和应用_第4张图片

上面这种就是经典的两列布局实现方式之一。

3,margin 合并

MDN参考

margin 合并的3种情况,BFC可以解决前2种

  1. 父子 margin 合并:父级和第1个/最后1个子元素
  2. 相邻兄弟元素的 margin 合并
  3. 空块级元素的 margin 合并

1,父子 margin 合并:父级和第1个/最后1个子元素

<style>
  .container {
    background-color: skyblue;
  }
  .item {
    margin-top: 50px;
    width: 50px;
    height: 50px;
    background-color: salmon;
  }
style>

<div>求关注,下雪天的夏风div>
<div class="container">
  <div class="item">div>
div>

表现:父级“掉”下来了:

CSS BFC特性和应用_第5张图片

解决方式之一,就是将父级设置为 BFC。

.container {
  display: flow-root;
}

CSS BFC特性和应用_第6张图片

2,相邻兄弟元素的 margin 合并

<style>
  .box {
    width: 100px;
    height: 100px;
    background-color: salmon;
  }
  .box1 {
    margin-bottom: 50px;
  }
  .box2 {
    margin-top: 100px;
  }
style>
<body>
  <div class="box box1">div>
  <div class="box box2">div>
body>

表现,margin 并没有相加,而是合并取最大值:

CSS BFC特性和应用_第7张图片

解决:给其中一个元素增加父级,这样就回到了第1种情况。

<style>
  .container {
    display: flow-root;
  }
style>

<div class="box box1">div>
<div class="container">
  <div class="box box2">div>
div>

CSS BFC特性和应用_第8张图片


这里也说明第一种父子 margin 合并还有哪些解决办法(bottom 合并同理):

  1. 父元素设置 border-top
  2. 父元素设置 padding-top
  3. 父元素和第一个子元素之间添加内联元素进行间隔。

以上。

你可能感兴趣的:(css,css,css3,前端,margin合并,高度坍塌,BFC)