css-BFC的一些实例应用

前言

上一篇总结css2.1布局的模型。但是具体到实际应用,还需要记录一下。

BFC布局规则

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

    哪些元素会产生BFC

  • 根元素
  • float属性不为none
  • position为absolute或fixed
  • display为inline-block, table-cell, table-caption, flex, inline-flex
  • overflow不为visible

    BFC的作用及原理

  1. 自适应两栏布局
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    <style>
    body {
    width: 300px;
    position: relative;
    }
    .aside {
    width: 100px;
    height: 150px;
    float: left;
    background: #f66;
    }
    .main {
    height: 200px;
    background: #fcc;
    }
    </style>
    <body>
    <div class="aside"></div>
    <div class="main"></div>
    </body>

  根据BFC布局规则第四条BFC的区域不会与float box重叠。

1
2
3
.main {
overflow: hidden;
}

  1. 清除内部浮动
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    <style>
    .par {
    border: 5px solid #fcc;
    width: 300px;
    }
    .child {
    border: 5px solid #f66;
    width:100px;
    height: 100px;
    float: left;
    }
    </style>
    <body>
    <div class="par">
    <div class="child"></div>
    <div class="child"></div>
    </div>
    </body>

根据计算BFC的高度时,浮动元素也参与计算

1
2
3
.par {
overflow: hidden;
}

  1. 防止垂直 margin 重叠
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <style>
    p {
    color: #f55;
    background: #fcc;
    width: 200px;
    line-height: 100px;
    text-align:center;
    margin: 100px;
    }
    </style>
    <body>
    <p>Haha</p>
    <p>Hehe</p>
    </body>

根据Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<style>
.wrap {
overflow: hidden;
}
p {
color: #f55;
background: #fcc;
width: 200px;
line-height: 100px;
text-align:center;
margin: 100px;
}
</style>
<body>
<p>Haha</p>
<div class="wrap">
<p>Hehe</p>
</div>
</body>

总结

 其实以上的几个例子都体现了BFC布局规则第五条:

  • BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。

参考

http://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html