浮动二文字围绕现象（中）

时间 2019-12-04

标签浮动文字围绕现象繁體版

原文原文链接

接着讲block-level box了。。。
css

block-level box

不知道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> 复制代码

效果以下：

上图中，每一个div .normal-child 占据一行，div里面的文字很乖的排在里面，并无移动到上一行的空余位置上，这说明div是以一个总体形式参与到当前的block formatting context中（若是不是总体参与，第三个div里的文字应该跑到第二个div的后面，对不对啦）。

至于为何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> 复制代码

效果以下：

能够看到，若是float box的宽度加上block box的宽度超过了containing block的宽度，排在后面的block box就会自动下移，而这也说明了非visible的block box是总体参与到当前的block formatting context，文字并无被包裹成匿名的block box上移到float box的右边（按常理，文字只有被包裹成匿名的block box才能够参与到block formatting context中）。

例四总体参与，且宽度为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> 复制代码

效果以下：

上例中，我并无指定跟在float box后面的div的宽度，那么对于这种状况，即使div的子box的宽度超过了除float box以外的剩余宽度，div产生的block box依然会与float box同行，由于它的宽度任意啊！！！width为auto的状况下，将overflow设为非visible就是无敌啊！另外，该div一样是以一个总体的形式参与到当前的block formatting context中，里面的文字参与的是该div所创建的inline formatting context。

小结：对于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很类似，这边先分析。

非block box的block-level box是么尼呢？不知道的童鞋翻翻这里的第21，22,23条，display为table的非replaced元素及display为block / list-item / table的 replaced元素均会产生非block box的block-level 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上测试。

浮动 二 文字围绕现象（中）

block-level box

浮动二文字围绕现象（中）