潜藏着的BFC,通晓CSS中的块级格式化上下文

明亮CSS中的块级格式化上下文

2015/08/10 · CSS · 1
评论 ·
格式化

原文出处: Ritesh
Kumar   译文出处:HaoyCn   

块级格式化上下文(Block Formatting
Context)是网页CSS视觉渲染的一片段,并用以决定块盒子的布局。在定位系统(Positioning
Scheme)中它属于常规流(诺玛l Flow)。依据W3C所言:

变动、相对定位元素(position 为 absolute 或 fixed)、行内块元素 display:inline-block、表格单元格display:table-cell、表格标题 display:table-caption 以及 overflow 属性值不为 visible 的要素(除了该值被流传到视点 viewport 的处境)将创设一个新的块级格式化上下文。

地方的引言差不离总括了一个BFC是什么形成的。但让大家用此外一种更通俗易懂的不二法门来重定义它。一个BFC就是一个HTML盒子,它起码满意以下原则之一:

  1. float 的值不为 none
  2. position 的值不为 static 或 relative
  3. display 的值为 table-celltable-captioninline-blockflex 或 inline-flex
  4. overflow 的值不为 visiable

CSS定位难题(1):盒模型、浮动、BFC

2016/04/27 · CSS ·
BFC,
定位,
盒模型

正文小编: 伯乐在线 –
zhiqiang21
。未经小编许可,禁止转发!
欢迎加入伯乐在线 专辑撰稿人。

引子:

在谈到css定位难题的时候先来看一个不是难点:

已知宽度(若是:100px)div框,水平居中,左右两边分别采用div框填充.且左右div自适应.

效益如下图: 亚洲必赢官网 1

那些标题标难点重如果浏览器宽度未知,且两边div自适应宽度.

首先种完成格局,是看重css3的新属性calc,完结代码如下:

CSS

body { margin: 0; padding: 0; font-size:0; } .left_div {
background-color: #62FF09;
/*calc是css3属性可以动态总括,包容不一致浏览器的品类须要加识其余前缀,卓殊关键的是要有空格*/
width: -webkit-calc(50% – 50px); width: calc(50%-50px); height: 200px; }
.mid_div { width: 100px; height: 200px; margin-left: -50px;
background-color: #20FFDA; margin:0 auto; } .right_div {
background-color: #FFF81B; height: 200px; width: -webkit-calc(50% –
50px); } div{display:inline-block;}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
body {
    margin: 0;
    padding: 0;
    font-size:0;
}
.left_div {
    background-color: #62FF09;
    /*calc是css3属性可以动态计算,兼容不同浏览器的类型需要加识别的前缀,非常重要的是要有空格*/
    width: -webkit-calc(50% – 50px);
    width: calc(50%-50px);
    height: 200px;
}
.mid_div {
    width: 100px;
    height: 200px;
    margin-left: -50px;
    background-color: #20FFDA;
    margin:0 auto;
}
.right_div {
    background-color: #FFF81B;
    height: 200px;
    width: -webkit-calc(50% – 50px);
}
div{display:inline-block;}

第三种已毕方式就是凭借与display属性,将兼具的div框具有table的单元格的属性.

代码如下:

CSS

* { padding: 0; margin: 0; } .left_div, .mid_div, .right_div {
height: 200px; display: table-cell; } .left_div { width: 50%;
background: #369; } .mid_潜藏着的BFC,通晓CSS中的块级格式化上下文。div { //非IE识其他属性,(>=IE8)
min-width: 100px; width: 100px; background: #697; } .right_div {
width: 50%; background: #126; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
* {
    padding: 0;
    margin: 0;
}
.left_div, .mid_div, .right_div {
    height: 200px;
    display: table-cell;
}
.left_div {
    width: 50%;
    background: #369;
}
.mid_div {
    //非IE识别的属性,(>=IE8)
    min-width: 100px;
    width: 100px;
    background: #697;
}
.right_div {
    width: 50%;
    background: #126;
}

此处解决问题的紧要思路是当中等的增幅确定后,因为兼具div是单元格所以使用50%使左右的单元格平分剩下的宽度.

什么是BFC

2016/01/09 · CSS · 2
评论 ·
BFC

原文出处:
大搜车前端团队博客   

那是自家10个月前写的一篇关于BFC的稿子,因为接下去要写一篇有关FFC的篇章了,然则无数人对BFC都还不打听,所以我先把那篇文章拿出去让我们先驾驭下BFC。

说到BFC,就会涉嫌到CSS布局的有的基本概念,然后,首先来讲一下有关块级盒的局地概念:

下边是出自w3.org中的一句话(参考链接:http://www.w3.org/TR/CSS2/visuren.html\#block-formatting):%EF%BC%9A)

Block-level elements are those elements of the source document that
are formatted visually as blocks (e.g., paragraphs). The following
values of the ‘display’ property make an element block-level: ‘block’,
‘list-item’, and ‘table’.

大约的情致是块级元素是这种源文档被格式化为可视块了的要素,然后使这么些因素变为块级元素的display属性取值如下:
‘block’, ‘list-item’, 和 ‘table’。

下一场还有一段话:

Block-level boxes are boxes that participate in a block formatting
context. Each block-level element generates a principal block-level
box that contains descendant boxes and generated content and is also
the box involved in any positioning scheme

块级盒block-level
box是那种插足了块级排版上下文的一种盒子,每个块级元素都生成了一个涵盖后代盒子和变化的内容的要害块级盒,并且这一个盒子出席了其它定点的臆想

源于w3c官网的一张图:

亚洲必赢官网 2

块级元素会自动生成一个块级盒block-level
box,那是块级盒block-level-box的盒模型构成,它标志的是块级盒自身的布局构成。再来看w3.org的这么一段话(
参考:http://www.w3.org/TR/CSS2/box.html):%EF%BC%9A)

content edge or inner edge
The content edge surrounds the rectangle given by the width and height
of the box, which often depend on the element’s rendered content. The
four content edges define the box’s content box.
padding edge
The padding edge surrounds the box padding. If the padding has 0
width, the padding edge is the same as the content edge. The four
padding edges define the box’s padding box.
border edge
The border edge surrounds the box’s border. If the border has 0 width,
the border edge is the same as the padding edge. The four border edges
define the box’s border box.
margin edge or outer edge
The margin edge surrounds the box margin. If the margin has 0 width,
the margin edge is the same as the border edge. The four margin edges
define the box’s margin box.

从地点这段话能够看到,margin、border、padding、content分别定义了元素三种边,然后每种档次的边的四条边定义了一个盒子,分别是content
box、padding box、border box、margin
box,而控制块盒在含有块中与紧邻块盒的垂直距离的便是margin-box,那几个margin-box是一直存在的,尽管它的margin为0,试看上面的代码:

XHTML

<div style=”width: 400px;height: 400px;
background:#ff4400;”></div>

1
<div style="width: 400px;height: 400px; background:#ff4400;"></div>

变化了一个块级的元素,同时元素也生成了一个块级盒:

亚洲必赢官网 3

这时自己尚未为那几个div设置margin值,然则这么些div依然有一个默许为0的margin的,试看上面的浏览器生成的computed
style:

亚洲必赢官网 4

可以看来div默认的margin为0,再看看w3.org的相干文档(参考:http://www.w3.org/TR/WD-CSS2/visudet.html):%EF%BC%9A)

亚洲必赢官网 5

下面说了元素的七个margin的默许值都是0(见黄色部分),然后使用对象是颇具的因素(见黑色部分),所有因素当然包含块级元素,由此所有的块级盒子无论怎么样都会有一个margin-box,在BFC中,margin-box会与其附近的margin-box的对边相折叠(关于BFC的margin折叠那里先不商讨)。margin-box是插手块级盒在内外文中的布局的,可是加入BFC布局的盒子却是块级盒block-level
box,并且还有某些亟需明确的是插足布局的是盒子而不是因素本身。下边那张图是自己要好清楚的块级盒block-level
box的咬合:

亚洲必赢官网 6

那就是说block-level box在页面中是怎么布局的啊。

大家不以为奇的讲述是如此的:

司空见惯流中的块元素独占一行,然后从上往下一个接一个的排布,相邻元素间会有外地距折叠

实在是如此(NOTE:这几个说法也非相对严厉,试看DEMO:,那怎么会那样啊,原因就是因为BFC的存在。试看下边的关于BFC的官方文档描述(参考:http://www.w3.org/TR/CSS21/visuren.html):%EF%BC%9A)

Floats, absolutely positioned elements, block containers (such as
inline-blocks, table-cells, and table-captions) that are not block
boxes, and block boxes with ‘overflow’ other than ‘visible’ (except
when that value has been propagated to the viewport) establish new
block formatting contexts for their contents.

In a block formatting context, boxes are laid out one after the other,
vertically, beginning at the top of a containing block. The vertical
distance between two sibling boxes is determined by the ‘margin’
properties. Vertical margins between adjacent block-level boxes in a
block formatting context collapse.

In a block formatting context, each box’s left outer edge touches the
left edge of the containing block (for right-to-left formatting, right
edges touch). This is true even in the presence of floats (although a
box’s line boxes may shrink due to the floats), unless the box
establishes a new block formatting context (in which case the box
itself may become narrower due to the floats).

大概意思如下: 第一段:浮动元素、相对定位元素,不是块级盒的块级包蕴块(比如inline-block、table-cell、table-capation)和overflow值不为visible的块级盒子为它们的情节建立了一个新的块级排版上下文。

其次段:在一个块级排版上下文中,盒子是从包括块顶部起初,垂直的一个接一个的排列的,相邻四个盒子之间的垂直的间距是被margin属性所控制的,在一个块级排版上下文中相邻的多个块级盒之间的垂直margin是折叠的。参加BFC的布局的唯有普通流normal
flow中的块级盒,而float、position值不为relative\static的因素是脱离BFC这一搭架子环境的,不加入BFC的布局

其三段:在一个块级排版上下文中,每个盒子的左外边是触境遇包涵块的右边的(对于从右向左的排版,则相反),即便在有变动元素参与的处境下也是如此(即便一个盒子的行盒是因为变化而裁减了的),除非这几个盒子新建了一个块级排版上下文(在好几情形下这些盒子自身会因为floats而变窄)。

先不解释第一段所描述的始末,先看第二段和第三段话,然后大家再来看一个很广泛的实例:
  代码如下:

XHTML

<div style=”width: 200px;height: 200px;background:
#cccccc;”></div> <div style=”width: 200px;height:
200px;background: #333333;”></div> <div style=”width:
200px;height: 200px;background: #666666;”></div>

1
2
3
<div style="width: 200px;height: 200px;background: #cccccc;"></div>
<div style="width: 200px;height: 200px;background: #333333;"></div>
<div style="width: 200px;height: 200px;background: #666666;"></div>

结果如下:亚洲必赢官网 7

三个块级盒,从上往下排列,看样子是遵从如上面第二段所述的这一条BFC布局规则的:“在一个块级排版上下文中,盒子是从包括块顶部先河,垂直的一个接一个的排列的”,那么那里的盒子要从上往下排列的话,肯定是得要一个包涵块containing
block和一个块级排版上下文BFC的,:root元素是会在其下创办一个BFC的,那么在那么些BFC下的富有块级盒都是会在它的蕴藏块中垂直的一个接一个的排布的。可是元素的隐含块是何许吗,试看来自w3.org的一段话(参考:http://www.w3.org/TR/CSS2/visudet.html):%EF%BC%9A)

The position and size of an element’s box(es) are sometimes calculated
relative to a certain rectangle, called the containing block of the
element:

趣味是:元素盒子的岗位和尺寸往往是根据一个矩形计算出来的,大家称那几个矩形为要素的涵盖块
然后它上边还有一句:

if the element’s position is ‘relative’ or ‘static’, the containing
block is formed by the content edge of the nearest block container
ancestor box.

情趣是:如若这几个因素的position值是relative或static,那么些元素的涵盖块是由离其多年来的块级的祖宗盒子的内容的边content-edge构成的。就是离其多年来的块级祖先盒子的content-box。

搞清了蕴藏块containing
block的概念,再来看看那一个实例中的3个div的盈盈块,很显然是其父级元素body,同时还在canvas所举行的BFC下,依照“在一个块级排版上下文中,盒子是从包括块顶部先导,垂直的一个接一个的排列的”的这么些定义,我们曾经确定了,这里的div是会笔直的一个接一个的排列的,但是你要注意到,第二段话只是概念了僵直方向的排布规则,还没说水平方向的,那么水平方向的又如何呢,试看第三段话的前两句:“在一个块级排版上下文中,每个盒子的左外边是触遇到包括块的左边的(对于从右向左的排版,则相反)”,而在那边,我并未为其定义从右向左的排版(对于从右向左的排版,参考:,所以这几个div的左外边是会触遭逢包涵块body的左边的。

正文只谈谈哪些是BFC,由此地点那段话中的某些原文就不一 一分解了。

再来看下面那段话第二段中的一句话:“相邻四个盒子之间的垂直的间距是被margin属性所主宰的,在一个块级排版上下文中相邻的几个块级盒之间的垂直margin是折叠的”,那是参预BFC布局的块级盒的又一风味,试看以下实例:

代码:

XHTML

<div style=”width: 200px;height: 200px;background:
#cccccc;margin-bottom: 30px;”></div> <div style=”width:
200px;height: 200px;background: #333333;margin-top:
30px;margin-bottom:30px;”> </div> <div style=”width:
200px;height: 200px;background: #666666;margin-top:
50px;”></div>

1
2
3
<div style="width: 200px;height: 200px;background: #cccccc;margin-bottom: 30px;"></div>
<div style="width: 200px;height: 200px;background: #333333;margin-top: 30px;margin-bottom:30px;">   </div>
<div style="width: 200px;height: 200px;background: #666666;margin-top: 50px;"></div>

如图:

亚洲必赢官网 8

可以看出上下多个div的margin折叠了,第二个div的margin-bottom和首个div的margin-top折叠为了30px,首个div的margin-bottom和第七个div的margin-top折叠为了50px,而以此折叠本质是块级盒block-level
box下的margin-box的折叠,后边会讲到如果再到这多少个div的外场一层再装进一个装有BFC的要素的话,他们中间的margin便不会折叠了,因为BFC里面的盒子和其外面的盒子间是不会有别的影响的,你恐怕会纳闷那这里的多少个div不是也在:root所举行的BFC下啊,那干什么还会折叠,原因很简单,就是因为你格外BFC在:root那里去了,BFC相当于一堵墙,你那么些墙在此地应该在各种div的外侧才会起到隔离这多少个div的功效啊,而:root下的格外BFC则是与世隔膜的:root下的第一手子元素了。关于margin折叠方面的还有很多细节,可以参照官方文档:

时至今日,大家就搞明白普通流中的块级盒的一对中坚特性的事由了。

上面说的都是:root下的BFC。那么,要是你在不晓得比如float的这么些特色能用于创设BFC的时候,你会不会很感叹的去想:root下的盒子会不会也有可以用于创造BFC的措施与相应的盒子呢?上下文套上下文可是一件很令人倍感欢欣的政工,因为自身得以把更加能创造BFC的盒子当作那么些:root,而以此创立了BFC的盒子则是一个单独的器皿,里面的参加BFC的块级盒不会潜移默化到盒子外面的盒子,外面的盒子也不会影响到中间加入了BFC的块级盒。试看之下demo:
&nbsp:;&nbsp:;代码如下:

XHTML

<div style=”overflow: auto;width: 100%;”> <div style=”float:
left;width: 100%;”> <div style=”margin-bottom: 30px;width:
100px;height: 100px;background-color: #cccccc;”></div>
</div> <div style=”float: left;width: 100%;”> <div
style=”margin-top: 50px;width: 100px;height: 100px;background-color:
#333333;”></div> </div> </div>

1
2
3
4
5
6
7
8
<div style="overflow: auto;width: 100%;">
    <div style="float: left;width: 100%;">
        <div style="margin-bottom: 30px;width: 100px;height: 100px;background-color: #cccccc;"></div>
    </div>
    <div style="float: left;width: 100%;">
        <div style="margin-top: 50px;width: 100px;height: 100px;background-color: #333333;"></div>
    </div>
</div>

&nbsp:;&nbsp:;结果如下:

亚洲必赢官网 9

可以看出,上边示例中的上面灰色div和底下青色div的margin并不曾重叠,那是因为那五个float的父盒子在为它上面的盒子创建了一个BFC,从而将float盒子里面的子盒子给隔离了起来,因而也就不会margin折叠了,那只是成立BFC的一个方法,其他的还有overflow:hidden等,而在这一个BFC下的盒子都是按照BFC的布局规则的。

接下来大家来从盒模型的角度来精晓下,BFC是什么将其下的盒子与外边隔离起来的,首先,最中央的盒子构成大家地方已经说过了,见上边的描述block-level
box的三结合的那张图:

然后,当块级盒block-level
box外层没有BFC作有限支撑,有margin折叠时,是那样的:

亚洲必赢官网 10

而当块级盒block-level
box外层有BFC作有限支撑时(比如给下图红色边框线盒子一个float:left),则是这样的:

亚洲必赢官网 11

与此同时BFC下的盒子是依据BFC的平整从上往下一个接一个的排列,并且存在外地距折叠的,你能够由此在那层BFC下再去嵌套BFC来阻拦上边盒子的异乡距折叠

亚洲必赢官网 12

终极,大家由此一张图来打听一个页面中的BFC的构成(有红色虚线的表示的是负有BFC的要素):

亚洲必赢官网 13

BFC描述的是页面中的,严谨来说是页面的:root下的一个布局上下文,它上边的盒子遵守BFC中的布局规则,它是讲述的是块级盒的布局规则,那么行盒,行级盒等盒子又是按照哪些的布局规则的吗?那里就不细讲了,可以看看winter先生的两张图,有助于对BFC的敞亮,也促进对CSS布局的精通:

亚洲必赢官网 14

亚洲必赢官网 15

最终要说的就是,本文只对BFC作了一个上马的牵线,如若要询问越来越多的细节,可以参照以下相关专业:

1 赞 15 收藏 2
评论

亚洲必赢官网 16

CSS: 潜藏着的BFC

2017/12/07 · CSS · 1
评论

原文出处:
杳杳飞花_Hwj   

在写样式时,往往是添加了一个体裁,又或者是修改了某个属性,就高达了俺们的预期。
而BFC就潜藏在其中,当您改改样式时,一不小心就能接触它而毫无察觉,由此尚未发现到BFC的神奇之处。

创设一个块级格式化上下文

一个BFC可以显式触发。如果大家想成立之,大家只需给它助长上面提到的其它一个CSS样式。

诸如,看上边的HTML:

XHTML

亚洲必赢官网,<div class=”container”> Some Content here </div>

1
2
3
<div class="container">
    Some Content here
</div>

一个新的BFC可以透过给容器添加任意一个必需的CSS样式来成立,比如overflow: scrolloverflow: hiddendisplay: flexfloat: left,或 display: table。尽管上述原则都足以成立BFC,但也会时有发生部分其他作用,如:

  1. display: table 可能引发响应性难题
  2. overflow: scroll 可能爆发多余的滚动条
  3. float: left 将把元素移至左边,并被此外因素环绕
  4. overflow: hidden 将裁切溢出元素

于是不管曾几何时,当要创制一个BFC时,大家要根据必要选拔最适于的体裁。为了保持一致性,我在本文的享有例子中均选取overflow: hidden

CSS

.container { overflow: hidden; }

1
2
3
.container {
    overflow: hidden;
}

您可以自由采纳使用除 overflow: hidden 之外的别样样式。

1.盒模型

盒模型又分IE盒模型和非IE盒模型: 看上边的一张图(来自维基百科):

亚洲必赢官网 17
由上边的图可以驾驭IE和非IE盒模型的区分紧要是计量元素的小幅和惊人差异等。

  1. IE浏览器: margin-left+width+margin-right
  2. 非IE浏览器:margin-left+border-left+padding-left+width+padding-right+border-right+margin-right

看一段代码:

XHTML

<!DOCTYPE html> <html lang=”en”> <head> <meta
charset=”UTF-8″> <title>box-html</title> <style
type=”text/css”> *{margin:0;padding:0;} #body-box{ width:700px;
height:500px; background-color:#FF00FF; /*overflow:hidden;*/ }
.box-style{ width:500px; height:300px; border:10px dashed black;
background-color:red; margin:10px 0 0 20px; padding: 10px 10px 10px
10px; } </style> </head> <body> <div
id=”body-box”> <div class=”box-style”>你好帅呀</div>
</div> </body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>box-html</title>
    <style type="text/css">
        *{margin:0;padding:0;}
        #body-box{
            width:700px;
            height:500px;
            background-color:#FF00FF;
            /*overflow:hidden;*/
        }
        .box-style{
            width:500px;
            height:300px;
            border:10px dashed black;
            background-color:red;
            margin:10px 0 0 20px;
            padding: 10px 10px 10px 10px;
        }
    </style>
</head>
<body>
    <div id="body-box">
        <div class="box-style">你好帅呀</div>
    </div>
</body>
</html>

成效如下: 亚洲必赢官网 18

很扎眼大家发现一个题材,就是子元素的margin-top作用在了父元素上。

当大家给父元素添加一个overflow:hidden属性时,结果正常。

如下图: 亚洲必赢官网 19

那是为什么吧?

overflow 样式值为 非 visilbe 时,实际上是创设了 CSS 2.1 规范定义的
Block Formatting
Contexts。创制了它的要素,会再一次统计其里面因素地方,从而得到确切高度。那样父容器也就隐含了转变元素高度。那几个名词过于生硬,在
CSS 3 草案中被变更为名词 Root
Flow,顾名思义,是创制了一个新的根布局流,那些布局流是独立的,不影响其外表因素的。实际上,这些特点与
早期 IE 的 hasLayout 特性格外相似。

经过测试在IE8之上的浏览器表现与chrome和firefox浏览器表现效用等同。不过在IE7以下浏览器不用安装这些特性就能够表现正常的职能。如下图:

亚洲必赢官网 20

上面的文字出现谬误:
很明显发现的一个问题就是IE8(包括IE8)以上浏览器的background-color是border+padding+content*.而IE8(不包括)是*padding+content。

地点的结论是自家在 IE11
浏览器中模拟IE8IE9得出的定论,上边的文字是有难题的(莫不是因为提拔IE11后,浏览器的辨析内核跟IE8和IE9差距,因为微软IE浏览器的正儿八经也是平昔在转移的)。

在实际的IE8IE9background-color都唯有是padding+content
。而IE11中background-colorborder+padding+content
再来看一个示范,代码如下:

XHTML

<!DOCTYPE html> <html lang=”en”> <head> <meta
charset=”UTF-8″> <title>TestBox</title> <style
type=”text/css”> body{margin:0;} .item1{ width:200px; height:300px;
border:2px solid #f73bd6; padding:100px 0 0 0; } .item2{ width:150px;
height:200px; margin:150px 0 0 0; border:2px solid #f73bd6; }
</style> </head> <body> <div class=”item1″>
<div class=”item2″></div> </div> </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TestBox</title>
    <style type="text/css">
    body{margin:0;}
    .item1{
        width:200px;
        height:300px;
        border:2px solid #f73bd6;
        padding:100px 0 0 0;
    }
    .item2{
        width:150px;
        height:200px;
        margin:150px 0 0 0;
        border:2px solid #f73bd6;
    }
    </style>
</head>
<body>
    <div class="item1">
        <div class="item2"></div>
    </div>
</body>
</html>

自家非别在非IE浏览器(且>=IE8也一律的效益)中测试的结果如下:

亚洲必赢官网 21

在IE7中的效果如下图: 亚洲必赢官网 22

在<=IE6之下彰显的功效如下(默许会将父级框撑开):

亚洲必赢官网 23

关于div的很小(最大)宽度和惊人在IE8(>=)之上和非IE浏览器上都完成了min-height,maxheight,min-width,max-width那四个属性。

一、什么是BFC(Block Formatting Context)

写CSS样式时,对一个要素设置css,大家首先要精通那几个因素是块级元素依旧行内元素,而BFC就是用来格式化块级盒子的。

Formatting
Context:指页面中一个渲染区域,并且有着一套渲染规则,它控制了其子元素如何稳定,以及与任何因素的相互关系和功用。

BFC定义:块级格式化上下文,它是指一个独自的块级渲染区域,唯有Block-level
Box到场,该区域具有一套渲染规则来约束块级盒子的布局,且与区域外部毫无干系。

BFC中盒子的对齐

W3C规范道:

在BFC上下文中,每个盒子的左外侧紧贴包涵块的右侧(从右到左的格式里,则为盒子右外侧紧贴包罗块左边),甚至有转移也是如此(固然盒子里的行盒子 Line Box 可能是因为变化而变窄),除非盒子成立了一个新的BFC(在那种情景下盒子本身可能鉴于变化而变窄)。

亚洲必赢官网 24

差不多来说,如上图所示,所以属于BFC的盒子都左对齐(在从左到右的格式下)并且它们的左外侧紧贴包涵块的左侧。在最后一个盒子中大家得以见见固然左边存在一个转变元素(红色),其它一个元素(蓝色)依旧紧贴包括块的左侧。该情状的暴发规律将在下文关于文字环绕的局部中琢磨。

关于body的问题:

看上面一段代码:

XHTML

<style type=”text/css”> *{margin:0;padding:0;} div{ width:300px;
height:200px; background-color:#9feb3d; } body{ border:5px solid
#eb3dda; background-color:#3d3deb; } </style> <body>
<div> <ul> <li>你是第1个</li>
<li>你是第2个</li> <li>你是第3个</li>
<li>你是第4个</li> <li>你是第5个</li>
</ul> </div> </body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<style type="text/css">
        *{margin:0;padding:0;}
        div{
            width:300px;
            height:200px;
            background-color:#9feb3d;
        }
        body{
            border:5px solid #eb3dda;
            background-color:#3d3deb;
        }
    </style>
<body>
    <div>
        <ul>
            <li>你是第1个</li>
            <li>你是第2个</li>
            <li>你是第3个</li>
            <li>你是第4个</li>
            <li>你是第5个</li>
        </ul>
    </div>
</body>

并且代码的作用图如下:

亚洲必赢官网 25

由上得以清楚body是一个独特的div(盒子)。它的background-color会延伸到margin。

二、BFC的生成

咱俩说到BFC是一块渲染区域,那么那块渲染区域究竟在哪儿吗,具体大小又是有些?这一个都是由生成BFC的因从来决定的。

满意下列CSS评释之一的因素便会生成BFC:

BFC造成的异地距折叠

在常规流中,盒子从蕴含块的顶部先导一个个地垂直摆放。五个同胞盒子间的垂直举例由四个盒子各自的异地距所控制,但不是双方外边距之和。

为便于明白,大家看个例子。

亚洲必赢官网 26

在上图中,一个红盒子(div)包罗着五个同胞绿元素(p),一个BFC已经成立了出来。

XHTML

<div class=”container”> <p>Sibling 1</p>
<p>Sibling 2</p> </div>

1
2
3
4
<div class="container">
    <p>Sibling 1</p>
    <p>Sibling 2</p>
</div>

相应的CSS是:

CSS

.container { background-color: red; overflow: hidden; /* creates a
block formatting context */ } p { background-color: lightgreen; margin:
10px 0; }

1
2
3
4
5
6
7
8
.container {
    background-color: red;
    overflow: hidden; /* creates a block formatting context */
}
p {
    background-color: lightgreen;
    margin: 10px 0;
}

力排众议上八个同胞元素间的异乡距应当是双方外边距之和(20px)但实际却是10px。这就是明显的外地距折叠(Collapsing
Margins)。即使同胞元素外边距不一致,将接纳最大的格外。

标准流的定义:

在不使用别的的与排列和一定有关的卓绝CSS规则时,各个要素的排列规则。


1、根元素或其余富含它的要素

使用BFC避免外边距折叠

在钻探了地方BFC折叠外边距的意况后,现在说幸免折叠可能有点令人摸不着头脑。但我们亟须牢记于心的一件事是,相邻块级盒子(同胞)之间的垂直外边距只有在它们处于同一个BFC时才会爆发折叠。假若它们分属于不相同的BFC,就不会折叠了。所以,通过创制新的BFC大家得以免止外边距折叠。

让我们在早前的例子中添加第七个同胞元素,现在HTML是:

XHTML

<div class=”container”> <p>Sibling 1</p>
<p>Sibling 2</p> <p>Sibling 3</p> </div>

1
2
3
4
5
<div class="container">
    <p>Sibling 1</p>
    <p>Sibling 2</p>
    <p>Sibling 3</p>
</div>

CSS是:

CSS

.container { background-color: red; overflow: hidden; /* creates a
block formatting context */ } p { background-color: lightgreen; margin:
10px 0; }

1
2
3
4
5
6
7
8
.container {
    background-color: red;
    overflow: hidden; /* creates a block formatting context */
}
p {
    background-color: lightgreen;
    margin: 10px 0;
}

结果和地方一样,即是说,折叠依旧会发出并且多个同胞间分隔的垂直距离是10px。那是因为多个 p 标签都从属于同一个BFC。

现在大家修改第一个同胞元素,使之成为一个新的BFC的一片段。现在的HTML变成了:

XHTML

<div class=”container”> <p>Sibling 1</p>
<p>Sibling 2</p> <div class=”newBFC”> <p>Sibling
3</p> </div> </div>

1
2
3
4
5
6
7
<div class="container">
    <p>Sibling 1</p>
    <p>Sibling 2</p>
    <div class="newBFC">
        <p>Sibling 3</p>
    </div>
</div>

css:

CSS

.container { background-color: red; overflow: hidden; /* creates a
block formatting context */ } p { margin: 10px 0; background-color:
lightgreen; } .newBFC { overflow: hidden; /* creates new block
formatting context */ }

1
2
3
4
5
6
7
8
9
10
11
.container {
    background-color: red;
    overflow: hidden; /* creates a block formatting context */
}
p {
    margin: 10px 0;
    background-color: lightgreen;
}
.newBFC {
    overflow: hidden;  /* creates new block formatting context */
}

目前出口的结果就截然不相同了:

亚洲必赢官网 27

因为第一个和首个同胞元素现在所属于差其他BFC,它们中间就不会发出外边距折叠了。

2.浮动

float
属性定义元素在哪些方向转变。以往以此特性总应用于图像,使文本围绕在图像周围,可是在
CSS
中,任何因素都得以变动。浮动元素会变卦一个块级框,而随便它自己是何种元素,且变动元素的宽窄是根据内容的幅度确定的。

看上面的一段代码:

XHTML

<body> <span class=”test-float1″>你好吧</span>
<span class=”test-float2″>我是如故吧</span> </body>

1
2
3
4
<body>
    <span class="test-float1">你好吧</span>
    <span class="test-float2">我是还是吧</span>
</body>

然后分别对.test-float1和.test-float2应用样式,代码如下:

CSS

*{padding:0;margin:0px;} span{ background-color:#f73bd6; margin:0 0 0
10px; } .test-float1{ float:left; height:100px; width:20px; }
.test-float2{ /*float:left;*/ height:100px; width:20px; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
*{padding:0;margin:0px;}
        span{
            background-color:#f73bd6;
            margin:0 0 0 10px;
        }
        .test-float1{
            float:left;
            height:100px;
            width:20px;
        }
        .test-float2{
            /*float:left;*/
            height:100px;
            width:20px;
        }

功用如下:

亚洲必赢官网 28

由地点的代码大家得以汲取一个定论,span作为一个行内元素当然是没有width和height特性的,可是当对行内元素运用float属性后,该因素具有了width和height属性

注意:

假定在一行之上唯有极少的上空可供浮动元素,那么这一个元素会跳至下一行,那一个进程会不断到某一行有所丰硕的半空中停止。

扭转的框可以向左或向右移动,直到它的异乡缘遇到含有框或另一个浮动框的边框甘休。由于浮动框不在文档的平凡流中,所以文档的一般性流中的块框表现得就如浮动框不存在同样。

看上边的一段代码:

XHTML

<!DOCTYPE html> <html lang=”en”> <head> <meta
charset=”UTF-8″> <title>TestFloat</title> <style
type=”text/css”> body{ margin:0; } .item1, .item2, .item3, .item4{
width:200px; height:100px; background-color:#d8f73b; margin:10px 0 0 0;
} .item1{ float:right; } .item2{ /*float:left;*/ } </style>
</head> <body> <div id=”body-div”> <div
class=”item1″>item1</div> <div
class=”item2″>item2</div> <div
class=”item3″>item3</div> <div
class=”item4″>item4</div> </div> </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TestFloat</title>
    <style type="text/css">
        body{
            margin:0;
        }
 
        .item1, .item2, .item3, .item4{
            width:200px;
            height:100px;
            background-color:#d8f73b;
            margin:10px 0 0 0;
        }
        .item1{
            float:right;
        }
        .item2{
            /*float:left;*/
        }
 
    </style>
</head>
<body>
    <div id="body-div">
        <div class="item1">item1</div>
        <div class="item2">item2</div>
        <div class="item3">item3</div>
        <div class="item4">item4</div>
    </div>
</body>
</html>

本条时候看看页面的结果有一个很通晓的bug,如下图:

亚洲必赢官网 29

可以很显眼的寓目在转变的item1和item2有一个区间没有在一条水平线上。

本条时候就回来了俺们早先的题材,我们给父级的div盒子添加overflow属性触发父级div的BFC。代码如下:

CSS

<style type=”text/css”> body{ margin:0; } //触发父级元素的BFC
#body-div{ overflow:hidden; } .item1, .item2, .item3, .item4{
width:200px; height:100px; background-color:#d8f73b; margin:10px 0 0 0;
} .item1{ float:right; } .item2{ /*float:left;*/ } </style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<style type="text/css">
        body{
            margin:0;
        }
        //触发父级元素的BFC
        #body-div{
            overflow:hidden;
        }
        .item1, .item2, .item3, .item4{
            width:200px;
            height:100px;
            background-color:#d8f73b;
            margin:10px 0 0 0;
        }
        .item1{
            float:right;
        }
        .item2{
            /*float:left;*/
        }
 
    </style>

效益如下图:

亚洲必赢官网 30

有关BFC的定义:

BFC(W3C CSS 2.1 规范中的一个定义)就是所谓的Block formatting
contexts (块级格式化上下文)。创制了
BFC的因素就是一个独自的盒子,里面的子元素不会在布局上影响外面的元素,反之亦然,同时BFC如故属于文档中的普通流。

这就是说怎么触发BFC呢?

  1. float 除了none以外的值
  2. overflow 除了visible 以外的值(hidden,auto,scroll )
  3. display (table-cell,table-caption,inline-block)
  4. position(absolute,fixed)
  5. fieldset元素

注意:

display:table 本身并不会创立BFC,但是它会生出匿名框(anonymous
boxes),而匿名框中的display:table-cell可以创建新的BFC,换句话说,触发块级格式化上下文的是匿名框,而不是
display:table。所以经过display:table和display:table-cell创制的BFC效果是不平等的。


fieldset
元素在www.w3.org里近来没有其余关于那一个触发行为的新闻,直到HTML5正经里才出现。有些浏览器bugs(Webkit,Mozilla)提到过这些触发行为,然而从未此外官方申明。实际上,即便fieldset在一大半的浏览器上都能创建新的块级格式化上下文,开发者也不应该把那当做是当然的。CSS
2.1尚未概念哪一类属性适用于表单控件,也尚未定义怎样行使CSS来给它们增加样式。用户代理可能会给那些属性应用CSS属性,指出开发者们把那种帮衬作为实验性质的,更高版本的CSS可能会越加规范那个。

BFC的特性:

1)块级格式化上下文种阻止外边距叠加
当四个相邻的块框在同一个块级格式化上下文中时,它们中间垂直方向的异地距会发生叠加。换句话说,若是那五个相邻的块框不属于同一个块级格式化上下文,那么它们的异乡距就不会叠加。
2)块级格式化上下文不会重叠浮动元素
依据规定,一个块级格式化上下文的边框不能够和它其中的要素的异乡距重叠。那就意味着浏览器将会给块级格式化上下文创建隐式的外地距来阻拦它和浮动元
素的异乡距叠加。由于那些缘故,当给一个接近浮动的块级格式化上下文添加负的异地距时将会不起功用(Webkit和IE6在那一点上有一个题材——可以看这些测试用例)。
3)块级格式化上下文平常可以涵盖浮动
接触了BFC的话,就不会被float元素覆盖,当子元素全部变迁的时候也可以正确地包罗了

深切钻研转移:

来看下边的一段代码:

XHTML

<!DOCTYPE html> <html lang=”en”> <head> <meta
charset=”UTF-8″> <title>Document</title> <style
type=”text/css”> body{margin:0;} #body-div{
background-color:#ffff99; border:1px solid #111111; padding:5px; }
#body-div div{ padding:10px; margin:15px; background-color:#90baff; }
#body-div p{ border:5px dashed #111111; background-color:#ff90ba; }
.item1{ border:5px dashed #111111; /*float:left;*/ } .item2{
border:5px dashed #f73b4d; } .item3{ border:5px dashed #0000CD; }
</style> </head> <body> <div id=”body-div”>
<div class=”item1″>Box-1</div> <div
class=”item2″>Box-2</div> <div
class=”item3″>Box-3</div>
<p>让我们更详尽地探访浮动和清理。如若希望让一个图纸浮动到文本块的右边,并且期望那幅图片和文件包涵在另一个有所背景颜色和边框的元素中。您可能编写上边的代码:让大家更详细地看望浮动和清理。如若希望让一个图片浮动到文本块的左边,并且期待那幅图片和文书包含在另一个兼有背景颜色和边框的要素中。您或许编写上面的代码:让大家更详实地看看浮动和清理。假诺希望让一个图形浮动到文本块的左手,并且愿意那幅图片和文书包括在另一个富有背景颜色和边框的因素中。您可能编写上边的代码:</p>
</div> </body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        body{margin:0;}
        #body-div{
            background-color:#ffff99;
            border:1px solid #111111;
            padding:5px;
        }
        #body-div div{
            padding:10px;
            margin:15px;
            background-color:#90baff;
        }
        #body-div p{
            border:5px dashed #111111;
            background-color:#ff90ba;
        }
        .item1{
            border:5px dashed #111111;
            /*float:left;*/
        }
        .item2{
            border:5px dashed #f73b4d;
 
        }
        .item3{
            border:5px dashed #0000CD;
 
        }
    </style>
</head>
<body>
    <div id="body-div">
        <div class="item1">Box-1</div>
        <div class="item2">Box-2</div>
        <div class="item3">Box-3</div>
        <p>让我们更详细地看看浮动和清理。假设希望让一个图片浮动到文本块的左边,并且希望这幅图片和文本包含在另一个具有背景颜色和边框的元素中。您可能编写下面的代码:让我们更详细地看看浮动和清理。假设希望让一个图片浮动到文本块的左边,并且希望这幅图片和文本包含在另一个具有背景颜色和边框的元素中。您可能编写下面的代码:让我们更详细地看看浮动和清理。假设希望让一个图片浮动到文本块的左边,并且希望这幅图片和文本包含在另一个具有背景颜色和边框的元素中。您可能编写下面的代码:</p>
    </div>
</body>
</html>

彰显效果如下图:

亚洲必赢官网 31

2、float的值不为none;

动用BFC包蕴浮动

BFC可以分包浮动。大家平常遇上容器中蕴藏浮动元素的情事。这种情景下容器元素没有中度并且其浮动子元素脱离了网页的常规流。大家司空见惯用破除浮动解决那么些难题,最普遍的做法就是使用伪元素。但大家也可以通过创办一个BFC来化解难点。

亚洲必赢官网 32

看个例证:

XHTML

<div class=”container”> <div>Sibling</div>
<div>Sibling</div> </div>

1
2
3
4
<div class="container">
    <div>Sibling</div>
    <div>Sibling</div>
</div>

CSS:

CSS

.container { background-color: green; } .container div { float: left;
background-color: lightgreen; margin: 10px; }

1
2
3
4
5
6
7
8
.container {
    background-color: green;
}
.container div {
    float: left;
    background-color: lightgreen;
    margin: 10px;
}

在上头这一个事例中,容器没有其余中度,并且它包不住浮动子元素。为解决此题材,大家通过添加 overflow: hidden 来在容器中开创一个新的BFC。修改后的CSS成了:

CSS

.container { overflow: hidden; /* creates block formatting context */
background-color: green; } .container div { float: left;
background-color: lightgreen; margin: 10px; }

1
2
3
4
5
6
7
8
9
10
.container {
    overflow: hidden; /* creates block formatting context */
    background-color: green;
}
 
.container div {
    float: left;
    background-color: lightgreen;
    margin: 10px;
}

近期容器可以包住浮动子元素,并且其入骨会扩大至包住其子元素,在那么些新的BFC中变化元素又回归到页面的常规流之中了。

2.1为Box-1设置浮动

CSS

.item1{ border:5px dashed #111111; float:left; }

1
2
3
4
.item1{
            border:5px dashed #111111;
            float:left;
        }

作用如下图:

亚洲必赢官网 33

可以观望规范流中的Box-2的文字在围绕着Box-1排列,而那时候的Box-1的升幅不再伸展,而是能包容下内容的小小宽度。
因为此时的Box-1已经淡出了标准流,标准流中的Box-2会顶到原来Box-1的职位(也就是Box-2的左手框和Box-1的左手框重合)此时Box-2的文字会围绕着Box-1排列。

3、overflow的值不为visible;

选取BFC防止文字环绕

有时候浮动DIV旁边的文本会环绕它(如下图1所示)而那种情景有时候并不如我们所愿,我们想要下图2的效率。要化解那个标题,大家可以用外边距,但也足以用BFC。

亚洲必赢官网 34

先是让大家弄通晓怎么文字会环绕。要驾驭这些我们务必清楚,当存在元素浮动的时候,盒模型如何是好事。那就是我原先商讨BFC中对齐时候的遗留难题。大家通过下图来看图1究竟发生了怎么。

亚洲必赢官网 35

假设HTML是:

XHTML

<div class=”container”> <div class=”floated”> Floated div
</div> <p> Quae hic ut ab perferendis sit quod architecto,
dolor debitis quam rem provident aspernatur tempora expedita. </p>
</div>

1
2
3
4
5
6
7
8
9
10
<div class="container">
    <div class="floated">
        Floated div
    </div>
    <p>
        Quae hic ut ab perferendis sit quod architecto,
        dolor debitis quam rem provident aspernatur tempora
        expedita.
    </p>
</div>

上图整个粉红色区域代表 p 元素,如我辈所见,p 元素没有挪动但它叠在了变动元素之下,而p要素的行盒子(即文本行)却移位了,行盒子水平变窄来给浮动元素腾出了空中。

趁着文本的增加,最终文件将围绕在风谲云诡元素之下,因为当时候行盒子不再须求活动,也就成了图1的旗帜。那就是为什么就是有变动元素,段落仍紧贴包括块的左侧,而行盒子会变窄来给浮动元素腾位子。

比方大家能位移整个 p 元素,这一个盘绕难题也就化解了。

在说解决方案此前,大家再回首下W3C规范:

在BFC上下文中,每个盒子的左外侧紧贴蕴含块的左侧(从右到左的格式里,则为盒子右外侧紧贴包括块左侧),甚至有生成也是这般(即使盒子里的行盒子 Line Box 可能是因为变化而变窄),除非盒子创造了一个新的BFC(在那种情状下盒子本身可能鉴于变化而变窄)。

据此,如果 p 元素创立一个新的BFC那它就不会再紧贴包蕴块的左侧了。给 p 元素添加 overflow: hidden 就能毫不费劲地办到。那解决了文件环绕浮动对象的难题。

2.2为Box-2设置浮动

CSS

.item2{ border:5px dashed #f73b4d; float:left; }

1
2
3
4
.item2{
            border:5px dashed #f73b4d;
            float:left;
        }

效益如下图:

亚洲必赢官网 36

那是很简单看到Box-3和Box-1的右边框重合。Box-3的文字围绕Box-2,并且Box-1和Box-2之间的空域是两者之间的margin暴发的。

4、position的值不为static;

在多列布局中使用BFC

若是大家创造一个占满整个容器宽度的多列布局,在好几浏览器中最终一列有时候会掉到下一行。那说不定是因为浏览器四舍五入了列宽从而拥有列的总幅度会超出容器。但假设大家在多列布局中的最后一列里创制一个新的BFC,它将接连占用其余列先占位落成后剩余的空中。

咱俩来举个三列布局的例证:

这是HTML:

XHTML

<div class=”container”> <div class=”column”>column
1</div> <div class=”column”>column 2</div> <div
class=”column”>column 3</div> </div>

1
2
3
4
5
<div class="container">
    <div class="column">column 1</div>
    <div class="column">column 2</div>
    <div class="column">column 3</div>
</div>

css:

CSS

.column { width: 31.33%; background-color: green; float: left; margin: 0
1%; } /* Establishing a new block formatting context in the last column
*/ .column:last-child { float: none; overflow: hidden; }

1
2
3
4
5
6
7
8
9
10
11
12
.column {
    width: 31.33%;
    background-color: green;
    float: left;
    margin: 0 1%;
}
/*  Establishing a new block formatting
    context in the last column */
.column:last-child {
    float: none;
overflow: hidden;
}

现今尽管盒子的增加率稍有改观,但布局不会打破。当然,对多列布局来说那不一定是个好办法,但能防止最终一列下掉。这些题材上弹性盒或许是个更好的化解方案,但那一个方法可以用的话明元素在这么些条件下的一坐一起。

2.3为Box-3设置浮动

CSS

.item3{ border:5px dashed #0000CD; float:left; }

1
2
3
4
5
    .item3{
            border:5px dashed #0000CD;
            float:left;
 
        }

效益如下图:

亚洲必赢官网 37

那一个时候可以很分明的看来多少个转变的盒子(都退出文档流)都被P标签的盒子所包围,并且被文字环绕。

5、display的值为inline-block、table-cell、table-caption;

总结

本人盼望本文已经向您显得了BFC的特征以及BFC是什么影响页面上的因素的视图定位的。显示其用法的例子应该有让BFC显得更不亦乐乎一些。

一旦您有任何想要补充的,请在评价里留言。若是您想更深刻明白的话,一定得去回看W3C对这几个话题的前述。

2.4装置Box-3浮动的来头

CSS

.item3{ border:5px dashed #0000CD; float:right; }

1
2
3
4
5
.item3{
            border:5px dashed #0000CD;
            float:right;
 
        }

成效如下图:

亚洲必赢官网 38

本条时候当我把浏览器窗口的增加率渐渐的压缩到不可以包容五个div宽度的时候,会有何样成效呢?如下图:

亚洲必赢官网 39

注意:

那种效益自己只在IE浏览器(<=IE8的浏览器中冒出更怪异的图景)里面测试的时候可以小到让Box-3换行。

在mac下得chrome,firefox和safari当窗口裁减到早晚的宽窄的时候,就不可以在裁减宽度。不可以出现Box-3被挤到下一行的情景。

如下图:

亚洲必赢官网 40

那时候假使我们设置item2右浮动item3左浮动当我压缩浏览器窗口的时候,会冒出如下的情事(mac下chrome和safari中如故是以上的事态,缩短到一定幅度不可能再压缩)。

亚洲必赢官网 41

因而大家得以得出一个结论:

当浮动的要素在一行不可以显示完全时,元素会按照普通流的次第(Dom排列顺序)被挤到下一行。

6、flex boxes (元素的display: flex或inline-flex);

注:也有人觉得display:
table能生成BFC,我觉着最首要原因是table会默许生成一个匿名的table-cell,正是以此匿名的table-cell生成了BFC。

译者注

正文中提及的转变与行盒子变窄难点深切切磋,可以参见博文:

W3C标准中“除了该值被流传到视点 viewport 的情状”,可以参考难题:

转发本文亦请同时注脚原出处(见本文顶部)。如你认同本文翻译,欢迎推荐或储藏,谢谢!

1 赞 8 收藏 1
评论

亚洲必赢官网 42

2.5变更的界线

追加Box-1的万丈,当减少浏览器的涨幅的时候,会产出如下的情景:

亚洲必赢官网 43

根本是因为那个时候Box-3的边缘被Box-1的边缘卡住的原委。

一般来说图黄色的地点会有多个margin值:

亚洲必赢官网 44

三、BFC的布局规则

简单来讲归结如下:
1、内部的因素会在笔直方向一个接一个地排列,可以精通为是BFC中的一个常规流
2、元素垂直方向的距离由margin决定,即属于同一个BFC的三个相邻盒子的margin可能会时有爆发重叠
3、每个元素的左外边距与分包块的左手界相接触(从左往右,否则反而),即便存在浮动也是如此,那申明BFC中的子元素不会超出它的包罗块
4、BFC的区域不会与float元素区域重叠
5、计算BFC的莫大时,浮动子元素也涉足统计
6、BFC就是页面上的一个隔断的独立容器,容器里面的子元素不会潜移默化到外边的要素,反之亦然

2.6收回浮动的熏陶

使用CSS属性Clear,它有八个值left,right,both。

如我辈裁撤p元素左右两侧的变迁:

代码如下:

CSS

#body-div p{ border:5px dashed #111111; background-color:#ff90ba;
clear:both; }

1
2
3
4
5
#body-div p{
            border:5px dashed #111111;
            background-color:#ff90ba;
            clear:both;
        }

作用如下: 亚洲必赢官网 45

四、BFC的应用

说了这么多,那么大家BFC到底有啥样用吧?下边我们因而多少个实例来解决部分题材:

2.7变更的震慑

自然浮动对父级元素也会牵动影响,比如说伟大的“塌陷”,看代码:

CSS

<style type=”text/css”> body{margin:0;} #body-div{
background-color:#ffff99; border:1px solid #111111; padding:5px; }
#body-div div{ padding:10px; margin:15px; background-color:#90baff; }
#body-div p{ border:5px dashed #111111; background-color:#ff90ba;
clear:both; } .item1{ border:5px dashed #111111; float:left;
height:30px; } .item2{ border:5px dashed #f73b4d; float:left; } .item3{
border:5px dashed #0000CD; float:left; } </style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<style type="text/css">
        body{margin:0;}
        #body-div{
            background-color:#ffff99;
            border:1px solid #111111;
            padding:5px;
        }
        #body-div div{
            padding:10px;
            margin:15px;
            background-color:#90baff;
        }
        #body-div p{
            border:5px dashed #111111;
            background-color:#ff90ba;
            clear:both;
        }
        .item1{
            border:5px dashed #111111;
            float:left;
            height:30px;
        }
        .item2{
            border:5px dashed #f73b4d;
            float:left;
        }
        .item3{
            border:5px dashed #0000CD;
            float:left;
 
        }
    </style>

功效如下图:

亚洲必赢官网 46

所有子元素的转变不会将父级元素的莫大撑开。

那么怎么解决那几个标题呢?

一个很古老的办法就是在享有子元素的结尾添加一个空的div,并且安装它的clear:both。
看代码如下:

CSS

#body-div .clear-float{ clear:both; border:0; padding:0; margin:0; }

1
2
3
4
5
6
#body-div  .clear-float{
            clear:both;
            border:0;
            padding:0;
            margin:0;
        }

功能如下:

亚洲必赢官网 47

实则我在IE各版本浏览器和非IE浏览器中测试的效应都是如上边的效应不尽如人意很简单的意识父级的div盒子并没有被完全的撑开。

不过有大神已经探究出了clearfix的写法,可以达到最入情入理的功效,主要目标就是接触父级盒子自身的BFC。

版本一:

CSS

.clearfix:after { content: “\200B”; display: block; height: 0; clear:
both; } .clearfix { *zoom: 1;/*IE/7/6*/ }

1
2
3
4
5
6
7
8
9
10
    .clearfix:after {
        content: "\200B";
        display: block;
        height: 0;
        clear: both;
    }
 
    .clearfix {
        *zoom: 1;/*IE/7/6*/
    }

> content:”\200B”;这几个参数,Unicode字符里有一个“零幅度空格”,即
U+200B,代替原先的“.”,可以减小代码量。而且不再利用visibility:hidden。
**版本二:**

CSS

.clearfix:before, .clearfix:after { content: “”; display: table; }
.clearfix:after { clear: both; } .clearfix { *zoom: 1; /*IE/7/6 */ }

1
2
3
4
5
6
7
8
9
10
.clearfix:before, .clearfix:after {
    content: "";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
*zoom: 1;        /*IE/7/6 */
}

通过测试在IE的次第版本的浏览器中和非IE浏览器都可以正常的得到结果。

亚洲必赢官网 48

实例1、解决margin重叠难题

玩css的意中人都知情margin
collapse,也就是附近的垂直元素同时安装了margin后,实际margin值会塌陷到里面较大的卓殊值。
其根本原理就是它们处于同一个BFC,符合“属于同一个BFC的两个相邻元素的margin会暴发重叠”的条条框框。

JavaScript

margin重叠现象: <!DOCTYPE html> <html lang=”en”>
<head> <meta charset=”UTF-8″> <meta name=”viewport”
content=”width=device-width, initial-scale=1.0″> <meta
http-equiv=”X-UA-Compatible” content=”ie=edge”>
<title>margin重叠现象</title> <style type=”text/css”>
*{margin: 0;padding: 0;} .box p { margin: 20px 0px; background-color:
skyblue; } </style> </head> <body> <div class=”box”
> <p>Lorem ipsum dolor sit.</p> <p>Lorem ipsum
dolor sit.</p> <p>Lorem ipsum dolor sit.</p>
</div> </body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
margin重叠现象:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>margin重叠现象</title>
    <style type="text/css">
        *{margin: 0;padding: 0;}
        .box p {
            margin: 20px 0px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="box" >
        <p>Lorem ipsum dolor sit.</p>
        <p>Lorem ipsum dolor sit.</p>
        <p>Lorem ipsum dolor sit.</p>
    </div>
</body>
</html>

亚洲必赢官网 49

亚洲必赢官网 50

亚洲必赢官网 51

亚洲必赢官网 52

由此实验结果我们发现,上下margin重叠了。

我们可以在其间一个因素外面包裹一层容器,并触发该容器生成一个BFC。那么五个元素便属于不一致的BFC,就不会发出margin重叠了。
大家做如下修改:

JavaScript

<div class=”box”> <p>Lorem ipsum dolor sit.</p>
<div style=”overflow:hidden;”> <p>Lorem ipsum dolor
sit.</p> </div> <p>Lorem ipsum dolor sit.</p>
</div>

1
2
3
4
5
6
7
<div class="box">
    <p>Lorem ipsum dolor sit.</p>
    <div style="overflow:hidden;">
        <p>Lorem ipsum dolor sit.</p>
    </div>
    <p>Lorem ipsum dolor sit.</p>
</div>

咱俩应用overflow:hidden;生成了一个BFC,成功化解了margin重叠难题。亚洲必赢官网 53

亚洲必赢官网 54

推介阅读:

打赏帮衬自己写出愈多好文章,谢谢!

打赏小编

亚洲必赢官网 55

打赏接济自己写出越来越多好作品,谢谢!

任选一种支付办法

亚洲必赢官网 56
亚洲必赢官网 57

4 赞 11 收藏
评论

实例2、解决浮动难题

俺们领略给父元素设置overflow:hidden可以排除子元素的扭转,但屡次都不亮堂原理是什么样。
骨子里那就是行使了BFC的原理:当在父元素中设置overflow:hidden时就会触发BFC,所以她其中的要素就不会潜移默化外面的布局,BFC就把变化的子元素中度当做了和谐之中的可观去处理溢出,所以外面看起来是铲除了扭转。

JavaScript

<!DOCTYPE html> <html lang=”en”> <head> <meta
charset=”UTF-8″> <meta name=”viewport”
content=”width=device-width, initial-scale=1.0″> <meta
http-equiv=”X-UA-Compatible” content=”ie=edge”>
<title>BFC浮动难题</title> <style> .one { /* 文档流
里面的文字标签将父元素撑起来 */ background-color: pink; } .two { float:
left; } </style> </head> <body> <!– 文档流
从上到下,当遭受float、position:absolute时,会离开文档流 –> <div
class=”one”> <div class=”two”>Hello World!</div>
</div> 你好世界! </body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>BFC浮动问题</title>
    <style>
        .one {
            /* 文档流 里面的文字标签将父元素撑起来 */
            background-color: pink;
        }
        .two {
            float: left;
        }
    </style>
</head>
<body>
    <!– 文档流 从上到下,当遇到float、position:absolute时,会离开文档流 –>
    <div class="one">
    <div class="two">Hello World!</div>
    </div>
    你好世界!
</body>
</html>

 

亚洲必赢官网 58

亚洲必赢官网 59


俺们做如下修改:

.one { background-color: pink; overflow: hidden; }

1
2
3
4
.one {
        background-color: pink;
        overflow: hidden;
    }

亚洲必赢官网 60

亚洲必赢官网 61

相比较发现,当我们一个要素设置成为BFC之后,总结BFC元素中度的时候,浮动元素也加入了总计。

有关小编:zhiqiang21

亚洲必赢官网 62

做认为对的事体,若是可能是错的,那就做认为自己接受得起的工作!

个人主页 ·
我的作品 ·
11 ·
     

亚洲必赢官网 63

实例3、解决侵夺浮动元素的题材

大家通晓浮动元素会脱离文档流,然后浮盖在文档流元素上。

JavaScript

<!DOCTYPE html> <html lang=”en”> <head> <meta
charset=”UTF-8″> <meta name=”viewport”
content=”width=device-width, initial-scale=1.0″> <meta
http-equiv=”X-UA-Compatible” content=”ie=edge”>
<title>BFC侵夺浮动元素的题材</title> <style> .box1 {
float: left; width: 100px; height: 100px; background-color: pink; }
.box2 { width: 200px; height: 200px; background-color: skyblue; }
</style> </head> <body> <div
class=”box1″>box1</div> <div
class=”box2″>box2</div> </body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>BFC侵占浮动元素的问题</title>
    <style>
        .box1 {
            float: left;
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        .box2 {
            width: 200px;
            height: 200px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="box1">box1</div>
    <div class="box2">box2</div>
</body>
</html>

亚洲必赢官网 64

 

当一个因素浮动,另一个要素不成形时,浮动元素因为脱离文档流就会盖在不转变的因素上。

咱俩做如下修改:

.box2 { width: 200px; height: 200px; background-color: skyblue;
overflow: hidden; }

1
2
3
4
5
6
.box2 {
        width: 200px;
        height: 200px;
        background-color: skyblue;
        overflow: hidden;
    }

或如下修改:

.box2 { width: 200px; height: 200px; background-color: skyblue; /*
overflow: hidden; */ float: left; }

1
2
3
4
5
6
7
.box2 {
        width: 200px;
        height: 200px;
        background-color: skyblue;
        /* overflow: hidden; */
        float: left;
    }

亚洲必赢官网 65

咱俩为非浮动元素建立BFC环境,依照BFC的不与float
box重叠的条条框框,解决了抢占元素难点。

这一特色,我觉得仍然很有用的,尤其是选拔在两栏布局上,相比较大家例行为非浮动元素或非定位元素设置margin来挤开的法子,其独到之处在于不需求去领略浮动或一定元素的升幅。

总结

上述就是有关BFC的有些分析,BFC
是一种概念,是对前者布局技术的一种理论上的下结论,精晓它可以让我们在运用CSS
+DIV进行布局时,知道有些例外操作以及规避难题的原理。BFC的概念相比空虚,但通过实例分析,有助于我们对BFC的驾驭。

在此仅列举了多少个例证,欢迎大家齐声探索更加多^_^

1 赞 4 收藏 1
评论

亚洲必赢官网 66

网站地图xml地图