我对BFC的理解与总结

来源：互联网发布：php转node.js 编辑：程序博客网时间：2024/04/20 09:14

在css中存在盒式模型概念，所以对一个元素设置css样式时，首先需要知道这个元素是block类型还是inline类型。而BFC就是用来格式化块级盒子。
1. BFC概念的理解
BFC(Block formatting context) “块级格式化上下文”，指一个独立的块级渲染区域，只有Block-level BOX参与，该区域拥有一套渲染规则来约束块级盒子的布局，与区域外部无关。

2.生成BFC的元素
(1) 根元素
(2) float：不为none
(3) overflow：不为visible
(4) display：为inline-block table-cell table-caption flex inline-flex
(5) position：为absolute fixed

3.BFC的约束规则
(1) 内部的BOX会在垂直方向上一个接一个的放置。
(2) 垂直方向上的距离由margin决定。属于同一个BFC的两个相邻的BOX的margin会发生重叠，与方向无关。
(3) 每个BOX的左外边距与包含块的左边界相接触（对于从左到右的格式化，否则相反），即使浮动元素也是如此。
(4) BFC的区域不会与float元素的区域重叠。
(5) 计算BFC的高度时，浮动子元素也要参与计算。
(6) BFC就是页面上的一个隔离的独立容器，容器里的子元素不会影响到外面的元素。

css的几条规则：
(1) block元素会扩展到父元素同宽，所以block元素会垂直排列。
(2) 垂直方向上的两个相邻的div的margin会重叠，而水平方向上不会。
(3) 浮动元素会尽量往左上方(右上方)。

4.BFC在布局上的应用
(1) 防止margin重叠

<style>        p{            width:200px;            height:100px;            line-height:100px;            text-align:center;            background:#fcc;            margin:50px;        }    </style><body><p>aaaaaa</p><p>bbbbbb</p></body>

出现margin重叠
两个p之间的距离为50px，出现了margin重叠。

符合上面BFC约束规则的第(2)条：垂直方向上的两个相邻BOX的margin会发生重叠，与方向无关。

修改方案：
在p外层包裹一层容器，overflow:hidden触发生成一个BFC。两个p不属于同一个BFC，不会发生margin重叠。

<style>        .wrap {            overflow:hidden;        }        p{            width:200px;            height:100px;            line-height:100px;            text-align:center;            background:#fcc;            margin:50px;        }    </style><body><p>aaaaaa</p><div class="wrap">    <p>bbbbbb</p></div></body>

这里写图片描述
两个p之间的距离为100px。

(2) 清除内部浮动

 <style>      .wrap{          border:5px solid #fee;          width:300px;      }        .child{            float:left;            border:5px solid #faa;            width:100px;            height:100px;        }    </style><body><div class="wrap">    <div class="child"></div>    <div class="child"></div></div></body>

这里写图片描述
修改方案：
为达到内部清除浮动，可以通过overflow:hidden触发生成一个BFC，在计算wrap高度时，wrap内部的浮动元素也会参与计算。

.wrap{          border:5px solid #fee;          width:300px;          overflow:hidden;      }

这里写图片描述
符合上面BFC约束规则的第(5)条：计算BFC的高度时，浮动子元素也要参与计算。

(3) 自适应两栏布局

 <style>        .wrap{            width:300px;        }        .aside{            float:left;            width:100px;            height:150px;            background:#fcc;        }        .main{            height:200px;            background:#f77;        }    </style><body><div class="wrap">    <div class="aside"></div>    <div class="main"></div></div>

这里写图片描述
符合BFC约束规则第(3)条：每个BOX的左外边距与包含块的左边界重叠。即使浮动元素也不例外。
修改方案：
通过overflow:hidden触发main生成BFC，实现自适应两栏式布局

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

这里写图片描述
当通过overflow:hidden触发main生成BFC时，这个BFC不会与浮动的aside重叠。
符合BFC约束规则的第(4)条：BFC的区域不会与float元素的区域重叠。

补充：(4) 自适应多栏布局

 <style>        .wrap{            width:400px;        }        .left{            float:left;            width:100px;            height:150px;            background:#f11;        }        .content{            height:180px;            background:#a11;        }        .right{            float:right;            width:100px;            height:150px;            background:#f0f;        }    </style><body><div class="wrap">    <div class="left"></div>    <div class="right"></div>    <div class="content"></div></div>

这里写图片描述
修改方式：

  .content{            overflow:hidden;            height:180px;            background:#a11;        }

这里写图片描述

注意html代码的布局

阅读全文

0 0