浮動二文字圍繞現象（中）

時間 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上測試。