CSS BFC

来源：互联网发布：手机淘宝购买成功截图编辑：程序博客网时间：2024/05/16 14:58

1.Formatting context

　　Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。最常见的 Formatting context 有 Block fomatting context (简称BFC)和 Inline formatting context (简称IFC)。
　　CSS2.1 中只有 BFC 和 IFC, CSS3 中还增加了 GFC(GridLayout Formatting Contexts) 和 FFC(Flex Formatting Contexts)。

2.BFC
　　BFC(Block formatting context)直译为”块级格式化上下文”。它是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。
　　
　　BFC布局规则：

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

3.如何创建BFC
float属性不为none
overflow不为visible(可以是hidden、scroll、auto)
position为absolute或fixed
display为inline-block、table-cell、table-caption

4.BFC的作用

( 1 ) 清除内部浮动
我们在布局时经常会遇到这个问题：对子元素设置浮动后，父元素会发生高度塌陷，也就是父元素的高度变为0。解决这个问题，只需要把把父元素变成一个BFC就行了。常用的办法是给父元素设置overflow:hidden。

<style>    .par {        border: 5px solid #fcc;        width: 300px;        overflow: hidden;//par在计算高度时，par内部的浮动元素child也会参与计算    }    .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>

这里写图片描述
( 2 ) 垂直margin合并
在CSS当中，相邻的两个盒子的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。

折叠的结果：
两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
两个外边距一正一负时，折叠结果是两者的相加的和。

<style>    .wrap {        overflow: hidden;    }    .inner{        width:100px;        height:80px;        color: #f55;        background: #fcc;        width: 200px;        line-height: 100px;        text-align:center;        margin: 100px 0px;    }</style><body>    <div class="inner"></div>    <div class="wrap">        <div class="inner"></div>    </div></body>

这里写图片描述
( 3 ) 创建自适应两栏布局

<style>    body {        width: 300px;        position: relative;    }    .aside {        width: 80px;        height: 200px;        float: left;        background: #f66;    }    .main {        height: 200px;        background: #fcc;        overflow: hidden; //main生成BFC后，这个新的BFC不会与浮动的aside重叠。                          //因此会根据包含块的宽度，和aside的宽度，自动变窄。    }</style><body>    <div class="aside"></div>    <div class="main"></div></body>

这里写图片描述

阅读全文

0 0