BFC
Posted 连冰华
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了BFC相关的知识,希望对你有一定的参考价值。
什么是BFC?
BFC(block-formatting-context):块级格式化上下文,它是指一个独立的块级渲染区域,只有Block-level BOX参与,该区域拥有一套渲染规则来约束块级盒子的布局,且与区域外部无关。
BFC的生成
既然上文提到BFC是一块渲染区域,那这块渲染区域到底在哪,它又是有多大,这些由生成BFC的元素决定,CSS2.1中规定满足下列CSS声明之一的元素便会生成BFC。
- 根元素
- float的值不为none
- overflow的值不为visible
- display的值为inline-block、table-cell、table-caption
- position的值为absolute或fixed
BFC布局规则
- 内部的Box会在垂直方向,一个接一个地放置。
- Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
- 每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。
- BFC的区域不会与float box重叠。
- BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。
- 计算BFC的高度时,浮动元素也参与计算
BFC在布局中的运用
1.水平方向上margin重叠
解决办法:只要将两个元素别放在一个BFC中即可
<!doctype html> <html> <head> <style type="text/css"> #green { margin:10px 10px 10px 10px } #blue { margin:10px 10px 10px 10px } #red { margin:10px 10px 10px 10px } body { writing-mode:tb-rl; } </style> </head> <body> <div id="green" style="background:lightgreen;height:100px;width:100px;"></div> <div id="blue" style="background:lightblue;height:100px;width:100px;"></div> <div id="red" style="background:pink;height:100px;width:100px;"></div> </body> </html>
2.嵌套标签,造成的margin重叠
此时div与ul之间的垂直距离,取div、ul、li三者之间的最大外边距,即margin:25px;
解决办法:代码中注释的代码
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <!--The viewport meta tag is used to improve the presentation and behavior of the samples on ios devices--> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/> <title></title> <style> html, body { height: 100%; width: 100%; margin: 0; padding: 0; } #map{ padding:0; } .first{ margin:20px; background:lightgreen; width:100px; height:100px; } ul{ /*display:inline-block;*/ margin:10px; background:lightblue; } li{ margin:25px; } </style> </head> <body class="claro"> <div class="first"></div> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </body> </html>
浮动相关问题:
使得父元素包含子元素,常见的方式是为父元素设置overflow:hidden或浮动父元素。根本原因在于创建BFC的元素,子浮动元素也会参与其高度计算,即不会产生高度塌陷问题。实际上只要让父元素生成BFC即可,并不只有这两种方式,如下代码:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <!--The viewport meta tag is used to improve the presentation and behavior of the samples on iOS devices--> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/> <title></title> <style> html, body { height: 100%; width: 100%; margin: 0; padding: 0; } #map{ padding:0; } .first{ margin:20px; background:lightgreen; border: 2px solid lightgreen; /*display:inline-block;*/ /*overflow:hidden;*/ /*float: left;*/ /*position: absolute;*/ } ul{ overflow:hidden; margin:10px; background:lightblue; width:100px; height:200px; float: left; } li{ margin:25px; } </style> </head> <body class="claro"> <div class="first"> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </div> </body> </html>
多栏布局的一种方式
上文提到的一条规则:与浮动元素相邻的已生成BFC的元素不能与浮动元素相互覆盖。利用该特性可以作为多栏布局的一种实现方式。
解释:代码中center加上了overflow:hidden生成了,不与浮动模块left,right相互覆盖
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <!--The viewport meta tag is used to improve the presentation and behavior of the samples on iOS devices--> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/> <title></title> <style> html, body { height: 100%; width: 100%; margin: 0; padding: 0; } .left{ background:pink; float: left; width:180px; } .center{ background:lightyellow; overflow:hidden; } .right{ background: lightblue; width:180px; float:right; } </style> </head> <body class="claro"> <div class="container"> <div class="left"> <pre> .left{ background:pink; float: left; width:180px; } </pre> </div> <div class="right"> <pre> .right{ background:lightblue; width:180px; float:right; } </pre> </div> <div class="center"> <pre> .center{ background:lightyellow; overflow:hidden; height:116px; } </pre> </div> </div> </html>
以上是关于BFC的主要内容,如果未能解决你的问题,请参考以下文章