我对浮动的认识（一）
浮動(dòng)布局是我之前用的比較多的一種布局，在用的過程中我也碰到了很多很詭異的問題，今天有空我花了些時(shí)間研究了下浮動(dòng)布局，發(fā)現(xiàn)以前對(duì)浮動(dòng)的理解
有些不對(duì)，特來記錄下。歡迎大家拍磚。?
?浮動(dòng)在歷史上最初是做什么的？?
在最開始的web發(fā)展初期，只有一些很簡(jiǎn)單的文字和圖片的布局，其中文字環(huán)繞圖片怎么辦呢？聰明的css開發(fā)者就發(fā)明了一個(gè)float屬性。這就是現(xiàn)在我們要
說的浮動(dòng)。因此，浮動(dòng)出現(xiàn)的意義就是讓文字環(huán)繞圖片。這是最原始的初衷。
文字環(huán)繞圖片是怎么做到的呢？下面分析下。首先我們看看沒有float的圖文混排。
?
代碼：<!DOCTYPE HTML>
<html ><head><meta http-equiv="Content-Type" content="text/html;charset=gb2312" /><style type="text/css">.item {border: 2px solid #dfdfdf;padding:5px;width:400px}.item img {padding:2px; border:1px solid #999}</style><title></title></head><body><div class="item ?"><img src="dj.jpg">日前，古裝大戲《傾城雪》開機(jī)。</div></body></html>?
可以看出，圖片和文字都在一行上顯示，我看了下w3c中關(guān)于浮動(dòng)的描敘，有一個(gè)關(guān)于line box的概念，其實(shí)就是將每一行當(dāng)做一個(gè)盒子。
那么這個(gè)行盒是有高度的。它的高度就是這一行中的最大的inline box（內(nèi)聯(lián)盒）的高度 。由于圖片是和文字的baseline對(duì)齊的。
所以文字是在下面的。文字而不是在圖片的中心位置。
那么如果添加了float：left屬性呢。如下圖所示：
?
可以看到文字沿著圖片排列了。這是為什么呢？就是浮動(dòng)的功效。由于浮動(dòng)破壞了line box，即圖片不再和文字組成一個(gè)行盒，所以他們不在一行上，
因此文字是從最上面開始排列的。由于文字的增多，會(huì)圍繞著圖片的。
?浮動(dòng)脫離了文檔流，但由于是物理存在的，占有位置。
??從上圖可以看到圖片超出了外面的包圍的盒子 ，原因就是因?yàn)樗撾x了文檔流，由于它是物理存在的，它有寬度，占有左邊的位置。顧文字是從右邊
開始環(huán)繞著圖片的。如果我增加了更多的文字。即使不在這個(gè)包裹元素里面。它仍然是從右邊開始的，將右邊的位置填滿后然后才用圖片下面的位置。
這好比流動(dòng)的水一樣，哪里缺口小，先往哪里鉆，等鉆不進(jìn)去了，再鉆大的缺口。。
浮動(dòng)的元素是沒有高度的，高度為0?
實(shí)例為證 如圖：
?
?代碼：
<!DOCTYPE HTML><html ><head><meta http-equiv="Content-Type" content="text/html;charset=gb2312" /><style type="text/css">.item {border-top: 5px solid #dfdfdf;border-bottom: 5px solid #333;}.item img {float:left;padding:2px; border:1px solid #999}</style><title></title></head><body><div class="item ?"><img src="dj.jpg"></div></body></html>??
為什么呢？就是因?yàn)楦?dòng)最本質(zhì)的特性，破壞了line box，將本身的高度降為0.由于其將高度降為0，浮動(dòng)元素沒有了內(nèi)聯(lián)盒子，
沒有了內(nèi)聯(lián)盒子的高度，才能讓其他內(nèi)聯(lián)盒子元素重新整合，環(huán)繞浮動(dòng)元素來進(jìn)行排列。
?
?
轉(zhuǎn)載于:https://www.cnblogs.com/yupeng/archive/2011/04/10/2011925.html
總結(jié)
以上是生活随笔為你收集整理的我对浮动的认识（一）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
