我對浮動的認識(一)

2022-02-22 01:07:29 字數 979 閱讀 2756

浮動在歷史上最初是做什麼的?說的浮動。因此,浮動出現的意義就是讓文字環繞。這是最原始的初衷。

文字環繞是怎麼做到的呢?下面分析下。首先我們看看沒有float的**混排。

**:日前,古裝大戲《傾城雪》開機。

可以看出,和文字都在一行上顯示,我看了下w3c中關於浮動的描敘,有乙個關於line box的概念,其實就是將每一行當做乙個盒子。

那麼這個行盒是有高度的。它的高度就是這一行中的最大的inline box(內聯盒)的高度 。由於是和文字的baseline對齊的。

所以文字是在下面的。文字而不是在的中心位置。

那麼如果新增了float:left屬性呢。如下圖所示:

可以看到文字沿著排列了。這是為什麼呢?就是浮動的功效。由於浮動破壞了line box,即不再和文字組成乙個行盒,所以他們不在一行上,

因此文字是從最上面開始排列的。由於文字的增多,會圍繞著的。

浮動脫離了文件流,但由於是物理存在的,占有位置。

從上圖可以看到超出了外面的包圍的盒子 ,原因就是因為它脫離了文件流,由於它是物理存在的,它有寬度,占有左邊的位置。顧文字是從右邊

這好比流動的水一樣,**缺口小,先往**鑽,等鑽不進去了,再鑽大的缺口。。

浮動的元素是沒有高度的,高度為0

例項為證 如圖:

**:為什麼呢?就是因為浮動最本質的特性,破壞了line box,將本身的高度降為0.由於其將高度降為0,

我對浮動的認識(一)

浮動在歷史上最初是做什麼的?說的浮動。因此,浮動出現的意義就是讓文字環繞。這是最原始的初衷。文字環繞是怎麼做到的呢?下面分析下。首先我們看看沒有float的 混排。日前,古裝大戲 傾城雪 開機。可以看出,和文字都在一行上顯示,我看了下w3c中關於浮動的描敘,有乙個關於line box的概念,其實就是...

我對浮動的理解和認識(二)

上篇我寫了我對浮動的認識 一 裡面主要說了float的初衷和浮動帶來的一些實際本質的問題。聰明的css開發者利用css的佔位特性進行布局,的確起到了一些很好的效果,但是也會帶來一些實際的問題。比如浮動後沒有高度,高度為0.這個現象 請廣大的css開發者留意。不然可能出現一些很莫名奇妙的問題。如何解決...

我對MySQL的認識

上週第一次聽說了mysql,之前一點了解都沒有,上課之後加上做作業的額外了解,我知道了它在資料庫的作用,它是資料庫的語言,是乙個資料庫管理系統,也是乙個關聯式資料庫。它是由oracle支援的開源軟體。這意味著任何乙個人都可以使用mysql而不用支付一毛錢。另外,如果需要,還可以更改其源 或進行二次開...