CSS定位规则之BFC 你居然一直不知道的东西！！！！！

阅读量：6319 次

发布时间：2019-06-22

本文共 5591 字，大约阅读时间需要 18 分钟。

BFC（Block Formatting CoFSADntext）直译为“块级格式化范围”

1.是 W3C CSS 2.1 规范中的一个概念，它决定了元素怎样对其内容进行定位。以及与其他元素的关系和相互作用。

当涉及到可视化布局的时候，Block Formatting Context提供了一个环境，HTML元素在这个环境中依照一定规则进行布局。一个环境中的元素不会影响到其他环境中的布局。比方浮动元素会形成BFC。浮动元素内部子元素的主要受该浮动元素影响，两个浮动元素之间是互不影响的。

这里有点类似一个BFC就是一个独立的行政单位的意思。

也能够说BFC就是一个作用范围。能够把它理解成是一个独立的容器，而且这个容器的里box的布局，与这个容器外的毫不相干。

2.还有一个通俗点的解释是：在普通流中的 Box(框) 属于一种 formatting context(格式化上下文) 。类型能够是 block ，或者是 inline 。但不能同一时候属于这两者。

而且， Block boxes(块框) 在 block formatting context(块格式化上下文) 里格式化， Inline boxes(块内框) 则在 inline formatting context(行内格式化上下文) 里格式化。不论什么被渲染的元素都属于一个 box 。而且不是 block 。就是 inline 。即使是未被不论什么元素包裹的文本，依据不同的情况，也会属于匿名的 block boxes 或者 inline boxes。

所以上面的描写叙述，即是把全部的元素划分到相应的 formatting context 里。

DEMO1:

<!DOCTYPE html>

<html>

<head>

<title>Examples</title>

<style>

body {

width: 300px;

position: relative;

}

.aside {

width: 100px;

height: 150px;

float: right;

background: #f66;

}

.main {

height: 200px;

background: #fcc;

}

</style>

</head>

<body>

</body>

</html>

显示效果如图：能够看到因为深红色快的浮动导致不占文档位置所以会浮动在粉红色块上

开启BFC:

<!DOCTYPE html>

<html>

<head>

<title>Examples</title>

<style>

body {

width: 300px;

position: relative;

}

.aside {

width: 100px;

height: 150px;

float: right;

background: #f66;

}

.main {

height: 200px;

background: #fcc;

overflow: hidden;

}

</style>

</head>

<body>

</body>

</html>

给当中

非浮动

的元素加入了overflow：hidden后看到效果例如以下图所看到的：

两个div不再堆叠在一起了

DEMO2

：

<!DOCTYPE html>

<html>

<head>

<title>Examples</title>

<style>

.par {

border: 5px solid #fcc;

width: 300px;

}

.child {

border: 5px solid #f66;

width:100px;

height: 100px;

float: left;

}

</style>

</head>

<body>

</div>

</body>

</html>

显示效果如图所看到的：因为子节点的浮动导致脱离了父节点文档，所以父节没有被撑开

开启BFC:

<!DOCTYPE html>

<html>

<head>

<title>Examples</title>

<style>

.par {

border: 5px solid #fcc;

width: 300px;

overflow: hidden;;

}

.child {

border: 5px solid #f66;

width:100px;

height: 100px;

float: left;

}

</style>

</head>

<body>

</div>

</body>

</html>

效果例如以下图所看到的：给父节点加入了overflowhidden，这时候就能够被子节点撑开了

DEMO3：

<!DOCTYPE html>

<html>

<head>

<!--The viewport meta tag is used to improve the presentation and behavior of the samples

on iOS devices-->

<style>

html, body { height: 100%; width: 100%; margin: 0; padding: 0; }

.left{

background:pink;

float: left;

width:180px;

height:200px;

}

.center{

background:lightyellow;

overflow:hidden;

height:200px;

}

.right{

background: lightblue;

width:180px;

height:200px;

float:right;

}

</style>

</head>

<body>

<div class="right">right</div>

<div class="center">center</div>

</div>

</html>

显示效果如图：我们看到三个div成一行排列了，注意这里的cener并没有设置宽度是自己主动撑开的，非常吊！

只是注意一点center必须再html标签的顺序上放在最后才干实现这个效果

DEMO4：

<!DOCTYPE html>

<html>

<head>

<!--The viewport meta tag is used to improve the presentation and behavior of the samples

on iOS devices-->

<style>

html, body { height: 100%; width: 100%; margin: 0; padding: 0; }

.main{border:2px blue solid;}

.left{

background:pink;

float: left;

width:180px;

height:200px;

}

</style>

</head>

<body>

<div class="left">right</div>

</div>

<div class="left">right</div>

</div>

</html>

显示效果如图所看到的：尽管left div是分别放在两个c div里面的。可是因为浮动导致子节点脱离文档流而使子节点不占位同一时候排成一行来布局

开启BFC:

<!DOCTYPE html>

<html>

<head>

<!--The viewport meta tag is used to improve the presentation and behavior of the samples

on iOS devices-->

<style>

html, body { height: 100%; width: 100%; margin: 0; padding: 0; }

.main{border:2px blue solid;}

.c{overflow: hidden;;}

.left{

background:pink;

float: left;

width:180px;

height:200px;

}

</style>

</head>

<body>

<div class="left">right</div>

</div>

<div class="left">right</div>

</div>

</html>

显示效果如图所看到的：给c div加入了overflow：hidden的时候触发了BFC 所以原本浮动的子节点并没有超出C div来影响到c外的节点，所以变成了两行

最后总结：

能够看到本篇文章通篇都是在解说怎样使用overflow来触发BFC，事实上除了overflow外还有其它的触发方法。仅仅只是临时还没遇到先不表，以上代码均通过IE7~[包含IE7]和谷歌的检測，能够放心使用

你可能感兴趣的文章

使用ArrayList时设置初始容量的重要性

查看>>

Java Web-----JSP与Servlet(一)

查看>>

Maven搭建SpringMVC+Mybatis项目详解

查看>>

CentOS 6.9通过RPM安装EPEL源（http://dl.fedoraproject.org）

4星|《先发影响力》：影响与反影响相关的有趣的心理学研究综述

查看>>

IE8调用window.open导出EXCEL文件题目

采集音频和摄像头视频并实时H264编码及AAC编码

查看>>

3星|《三联生活周刊》2017年39期：英国皇家助产士学会于2017年5月悄悄修改了政策，不再鼓励孕妇自然分娩了...