接着讲block-level box了。。。
css
不知道block-level box是如何产生的童鞋,请移驾这里,找第21条。会不会有童鞋疑惑 —— 块状的box居然也能画圈圈 。。。哈哈哈,本小姐变给你看!html
要让块状的box画圈圈,得配合必定的形势!试想,若是这个block-level box在float box以前,它可以画吗?chrome
例一 block-level box在前,float box在后bash
<html>
<head>
<style type="text/css">
.parent{
width:500px;
height:120px;
margin:20px auto 0;
padding:10px;
line-height:30px;
font-family:"Times New Roman",Georgia,Serif;
border:solid 2px rgba(247, 79, 79, 0.56);
}
.normal-child{
width:100%;
border:solid 1px rgba(247, 79, 79, 0.56);
text-align:center;
margin-bottom:10px;
}
.float-child{
width:100px;
height:50px;
float:left;
margin-right:10px;
box-sizing:border-box;
background:rgba(247, 79, 79, 0.56);
}
</style>
</head>
<body>
<div class='parent'>
<div class='normal-child'>I'm block-level box. I'm block-level box.</div>
<div class='float-child'>
</div>
</div>
</body>
</html>
复制代码
效果以下:测试
哎,没有与float box同行耶!ui
我知道了!是由于block-level box的宽度太长,他俩一行放不下!——童鞋甲兴奋的说道spa
好!就按你说的来,改短点。3d
修改例一的CSS代码:code
.normal-child{
width:300px;
border:solid 1px rgba(247, 79, 79, 0.56);
text-align:center;
margin-bottom:10px;
}复制代码
效果以下:orm
童鞋,对于block-level box而言,能不能围起float box不光是看宽度的!
当block-level box在float box以前,因为自己的特性,它本身会独占一行,不给其余box一点机会(别跟我说positioned box啊,人为计算距离故意设置的不算!),那么float box也只能移居下方了。所以,要想围起float box,就得把block-level box放置float box以后!
考虑三种block-level box:1. 非visible的block box(第23条);2. visible的block box;3.非block box的block-level box。至于为何要酱紫分,接着看。
1. 非visible的block box
看过这篇文章的童鞋应该知道,非visible的block box会为它的内容(也就是它的子孙)创建一个新的block formatting context。
这个功能有什么做用呢?
在CSS渲染时,该box将以一个总体参与到当前的block formatting context中(这个context不必定是父box创建的,也多是祖父box哈),而它的子孙只会参与到它所创建的block formatting context。
不懂?上栗子!
例二 总体参与,且宽度够小可与float box同行
<html>
<head>
<style type="text/css">
.parent{
width:500px;
height:130px;
margin:20px auto 0;
padding:10px;
line-height:30px;
font-family:"Times New Roman",Georgia,Serif;
border:solid 2px rgba(247, 79, 79, 0.56);
}
.float-child{
width:100px;
height:50px;
float:left;
margin-right:10px;
box-sizing:border-box;
background:rgba(247, 79, 79, 0.56);
}
.normal-child{
width:350px;
overflow:auto;
border:solid 1px rgba(247, 79, 79, 0.56);
margin-bottom:5px;
padding-left:5px;
}
</style>
</head>
<body>
<div class='parent'>
<div class='float-child'></div>
<div class='normal-child'>I'm first non-visible block box after float box</div> <div class='normal-child'>I'm second non-visible block box after float box</div>
<div class='normal-child'>I'm third non-visible block box after float box</div> </div> </body> </html> 复制代码
至于为何float box会与block-level box同行?这一方面取决于float box自己的浮动特性,它能够与block-level box及inline-level box同行;另外一方面取决于当前的形势。就如同一位厨师,要想作出一桌满汉全席,他首先得具有作满汉全席的能力,其次他须要原材料,这样才能真正的作出来。
浮动特性没什么好说的,彻底由css控制。我来讲说形势。
由于float box是脱离了普通流(normal flow), 那么无论block-level box是排在float box以前仍是以后,它都会假设float box不存在,并肯定好本身的位置。待float box渲染时,float box会回到本身本来的位置,若是本身的位置被占了怎么办,其余box会自觉的向反方向流动,若该行没有足够空间放置其余box,那么它们会委屈下移。
看本例,float box宽度加上一个div.normal-child的宽度依然小于containing block(看第11条)的宽度,那么它们可并排同行。
例三 总体参与,且宽度够大不可同行
<html>
<head>
<style type="text/css">
.parent{
width:500px;
height:130px;
margin:20px auto 0;
padding:10px;
line-height:30px;
font-family:"Times New Roman",Georgia,Serif;
border:solid 2px rgba(247, 79, 79, 0.56);
}
.float-child{
width:100px;
height:50px;
float:left;
margin:0 10px 10px 0;
box-sizing:border-box;
background:rgba(247, 79, 79, 0.56);
}
.normal-child{
width:450px;
overflow:auto;
border:solid 1px rgba(247, 79, 79, 0.56);
padding-left:5px;
}
</style>
</head>
<body>
<div class='parent'>
<div class='float-child'></div>
<div class='normal-child'>I'm non-visible block box after float box, and have a longer width</div </div> </body> </html> 复制代码
效果以下:
例四 总体参与,且宽度为auto
<html>
<head>
<style type="text/css">
.parent{
width:500px;
height:auto;
margin-top:50px;
margin-left:auto;
margin-right:auto;
}
.float-child{
width:200px;
height:200px;
background-color:rgba(247, 79, 79, 0.56);
margin-right:10px;
float:left;
}
.normal-child{
overflow:auto;
height:200px;
}
.special-child{
width:350px;
height:100px;
border:solid 2px rgba(247, 79, 79, 0.56);
padding:10px;
}
</style>
</head>
<body>
<div class='parent'>
<div class='float-child'></div>
<div class="normal-child">
<div class="special-child">I'm a child in non-visible block box</div> </div> </div> </body> </html> 复制代码
效果以下:
小结:对于block-level box为非visible的block box,由于它具有创建一个block formatting context 的特殊功能,故它始终是以一个总体(包含它自己及子box)的形式参与到当前的block formatting context中。若是要达到包围的效果,只需将多个该类型的box放置float box以后,且宽度小于w( w = containing block的宽度 - float box的宽度 )便可。
2. 非block box的block-level box
因为非block box的block-level box与非visible的block box很类似,这边先分析。
咱们来看看他们的行为。
例五 table围绕float box
<html>
<head>
<style type="text/css">
.parent{
width:500px;
height:130px;
margin:20px auto 0;
padding:10px;
line-height:30px;
font-family:"Times New Roman",Georgia,Serif;
border:solid 2px rgba(247, 79, 79, 0.56);
}
.float-child{
width:100px;
height:50px;
float:left;
margin-right:10px;
box-sizing:border-box;
background:rgba(247, 79, 79, 0.56);
}
.normal-child{
width:350px;
display:table;
border:solid 1px rgba(247, 79, 79, 0.56);
margin-bottom:5px;
padding-left:5px;
}
</style>
</head>
<body>
<div class='parent'>
<div class='float-child'></div>
<div class='normal-child'>I'm block-level box, but not block box.</div> <div class='normal-child'>I'm block-level box, but not block box.</div>
<div class='normal-child'>I'm block-level box, but not block box.</div> </div> </body> </html> 复制代码
与例二相比,去掉了class 类normal-child的overflow设置,并将display设为table,效果以下:
竟与例二的效果惊人的一致 。。。
其实,overflow值不为visible的block box 与 非block box的block-level box都是以一个总体形式参与当前的block formatting context,因此他们在float box的先后时行为会表现一致。不信!?那就把例三和例四中的normal-child.div 都替换为table试试看吧。
小结:看上个小结(窃笑中。。。)
还有一个visible的block box没分析,想留着下篇写。。。不要骂我懒,这篇已经够你们消化了,下篇再见哈!
ps: 本文中的例子均是在chrome 49.0上测试。