精簡高效CSS系列之二 浮動float

2022-04-04 00:09:30 字數 1494 閱讀 2869

假如乙個頁面上有3個div塊,如下排列:

圖1:不使用浮動

圖2:向右浮動

圖2說明了框1脫離了文件流向右移動,直到它的右邊緣碰到包含框的右邊緣為止。

圖3:向左浮動

圖3說明了框1向左浮動,脫離文件流向左移動,直到它的左邊緣碰到框2的左邊緣為止,由於框1脫離了文件流,不佔據空間,框2處於文字流中,所以框1覆蓋了框2。

上面3個圖說明了,浮動既可以向左也可以向右,直到它的外邊緣碰到包含框或者另乙個浮動框的邊框為止。由於浮動框不在文件的普通流中,所以文件的普通流中的塊框表現得就像浮動框不存在一樣。

下面用**實現一下:

css簡介

css(cascading style sheet),中文譯為層疊樣式表,是用於控制網頁樣式並允許將樣式資訊與網頁內容分離的一種標記性語言。css是2023年由w3c審核通過,並且推薦使用的。簡單的說css的引入就是為了使得html能夠更好的適應頁面的美工設計。它以html為基礎,提供了豐富的格式化功能,如字型、顏色、背景、整體排版等等,並且網頁設計者可以針對各種視覺化瀏覽器設定不同的樣式風格,包括顯示器、印表機、打字機、投影儀、pda等等。css的引入隨即引發了網頁設計的乙個又乙個新高潮,使用css設計的優秀頁面層出不窮。

效果如下:

這個例子是**混排,把設定為左浮動。

清除浮動(clear)是float的乙個屬性。

語法:clear : none | left | right | both

取值:none  :  預設值。允許兩邊都可以有浮動物件

left   :  不允許左邊有浮動物件

right  :  不允許右邊有浮動物件

both  :  不允許有浮動物件

對於css的清除浮動(clear),一定要牢記:這個規則只能影響使用清除的元素本身,不能影響其他元素。

例子:

這是乙個浮動元素

這是乙個清除浮動屬性的元素

效果:

浮動能使得塊級標籤排在同一行,但由於浮動脫離了文件位置,因為假如浮動層有乙個不浮動的父親層,父親層是包不住浮動層的,就得清除浮動。關於css浮動本篇文章只是簡單介紹了一下,還有更多的內容等待著去挖掘。

CSS系列 浮動

元素的浮動是指設定了浮動屬性的元素會脫離標準普通流的控制,移動到其父元素中指定位置的過程。css的定位機制有3種 普通流 標準流 浮動和定位。html語言當中另外乙個相當重要的概念 標準流!或者普通流。普通流實際上就是乙個網頁內標籤元素正常從上到下,從左到右排列順序的意思,比如塊級元素會獨佔一行,行...

精簡高效的CSS命名準則 方法

single css display dn.di db.dib if the element is block level eg.div,li using inline any instead height h14 h16 h18 h20 h22 h24 width fixed width valu...

hibernate系列之二

首先先介紹一下持久化 持久化 將程式資料在持久狀態和瞬時狀態間轉換的機制 即將記憶體的資料永久存在關係型資料庫中 持久化類的編寫規則 持久化類需要提供無參構造方法 持久化類的屬性需要私有,對私有的屬性提供get set方法 持久化類的屬性盡量使用包裝類的型別 持久化類要有乙個唯一標識oid與表的主鍵...