基于CSS盒子模型float屬性解析

蔣昀昕

(福建衛(wèi)生職業(yè)技術(shù)學(xué)院公共基礎(chǔ)部，福建 福州 350101)

基于CSS盒子模型float屬性解析

蔣昀昕

(福建衛(wèi)生職業(yè)技術(shù)學(xué)院公共基礎(chǔ)部，福建 福州 350101)

本文介紹了盒子模型與標(biāo)準(zhǔn)文檔流的概念，闡述了盒子在標(biāo)準(zhǔn)流中的定位原則。重點(diǎn)解析了CSS中的浮動(dòng)屬性，并通過(guò)具體的網(wǎng)頁(yè)布局實(shí)例進(jìn)一步說(shuō)明浮動(dòng)屬性的用法。

CSS；浮動(dòng)；盒子模型；標(biāo)準(zhǔn)文檔流

1 引言

盒子模型是CSS控制頁(yè)面時(shí)一個(gè)重要的概念。只有掌握了盒子模型以及其中每個(gè)元素的用法，才能真正地控制好頁(yè)面中的各個(gè)元素。本文主要介紹盒子模型的基本概念，以及在標(biāo)準(zhǔn)流情況下的盒子相互關(guān)系，解析了盒子模型的float屬性。

2 盒子模型的概念

所謂盒模型，就是瀏覽器為頁(yè)面中的每個(gè)HTML元素生成的矩形盒子。這些盒子們都要按照可見(jiàn)版式模型（visual formatting model）在頁(yè)面上排布。可見(jiàn)的頁(yè)面版式主要由三個(gè)屬性控制：position屬性、display屬性和float屬性。其中，position屬性控制頁(yè)面上元素間的位置關(guān)系，display屬性控制元素是堆疊、并排或是根本不在頁(yè)面上出現(xiàn)，float屬性提供控制的方式，以便把元素組成多欄布局[1]。

盒子模型是CSS的基石之一，它指定元素如何顯示以及各元素之間如何相互交互。頁(yè)面上的每個(gè)元素都被瀏覽器看成是一個(gè)矩形的盒子，這個(gè)盒子由元素的內(nèi)容、填充、邊框和邊界組成。網(wǎng)頁(yè)就是由許多個(gè)盒子通過(guò)不同的排列方式（上下排列，并列排列，嵌套排列）堆積而成。每個(gè)HTML元素都可以看作是一個(gè)裝了東西的盒子。盒子里面的內(nèi)容到盒子的邊框之間的距離即填充(padding)，盒子本身有邊框(border)，而盒子邊框外和其它盒子之間，還有邊界(margin)。如圖1所示，默認(rèn)情況下盒子的邊框是無(wú)，背景色是透明，所以我們?cè)谀J(rèn)情況下看不到盒子。

3 標(biāo)準(zhǔn)文檔流

標(biāo)準(zhǔn)文檔流（Normal Document Stream），簡(jiǎn)稱(chēng)“標(biāo)準(zhǔn)流”，是指在不使用其它的與排列和定位相關(guān)的CSS規(guī)則時(shí)，各種元素的排列規(guī)則。通俗地說(shuō)，將窗體自上而下地分成一行行，并在每行中按從左至右的順序排放元素，即稱(chēng)為“文檔流”。HTML文檔中的元素可以分為兩大類(lèi)：塊級(jí)元素和行內(nèi)元素。

圖1 標(biāo)準(zhǔn)盒子模型

(1)塊級(jí)元素（block level）：總是以一個(gè)塊的形式表現(xiàn)出來(lái)，并且跟同級(jí)的兄弟塊依次豎直排列，左右自動(dòng)伸展，直到包含它的元素的邊界，在水平方向不能并排。

(2)行內(nèi)元素（inline）：對(duì)于文字這類(lèi)元素，各個(gè)字母之間橫向排列，到最右端自動(dòng)折行，這就是另一種元素，稱(chēng)為“行內(nèi)元素”。行內(nèi)元素不占據(jù)單獨(dú)的空間，依附于塊級(jí)元素，行內(nèi)元素沒(méi)有自己的區(qū)域。它同樣是DOM樹(shù)中的一個(gè)節(jié)點(diǎn)，在這一點(diǎn)上行內(nèi)元素和塊級(jí)元素是沒(méi)有區(qū)別的。

4 盒子在標(biāo)準(zhǔn)流中的定位原則

如果要精確地控制盒子的位置，就必須對(duì)margin有更深入的了解。Padding只存在于一個(gè)盒子內(nèi)部，所以通常它不會(huì)涉及與其它盒子之間的關(guān)系和相互影響的問(wèn)題。Margin則用于調(diào)整不同的盒子之間的位置關(guān)系，因此必須要對(duì)margin在不同情況下的性質(zhì)有更深入的了解[2]。

(1)行內(nèi)元素之間的水平margin：當(dāng)兩個(gè)行內(nèi)元素緊鄰時(shí)，它們之間的距離為第1個(gè)元素的margin-right加上第2個(gè)元素的margin-left。

(2)塊級(jí)元素之間的豎直margin：兩個(gè)塊級(jí)元素之間的距離不是margin-bottom與margin-top的總和，而是兩者中的較大者。這個(gè)現(xiàn)象稱(chēng)為margin的“塌陷”現(xiàn)象，意思是較小的margin塌陷到了較大的margin中。

(3)嵌套盒子之間的margin：當(dāng)一個(gè)〈div〉塊包含中另一個(gè)〈div〉塊中時(shí)，便形成了典型的父子關(guān)系。其中子塊的margin將以父塊的content為參考。

(4)將margin設(shè)置為負(fù)值：當(dāng)margin為負(fù)數(shù)時(shí)，會(huì)使被設(shè)為負(fù)數(shù)的塊向相反的方向移動(dòng)，甚至覆蓋在另外的塊上。當(dāng)塊之間是父子關(guān)系時(shí)，通過(guò)設(shè)置子塊的margin參數(shù)為負(fù)數(shù)，可以將子塊從父塊中“分離”出來(lái)。

5 盒子的浮動(dòng)

浮動(dòng)，從字面意思上理解是把元素從常規(guī)文檔流中拿出來(lái)。拿出來(lái)的目的主要有兩點(diǎn)：一是可以實(shí)現(xiàn)傳統(tǒng)出版物上的文字圍繞圖片的效果，二是可以讓原來(lái)上下堆疊的塊級(jí)元素變成左右并列，從而實(shí)現(xiàn)布局中的分欄效果。浮動(dòng)元素脫離了常規(guī)文檔流之后，原來(lái)緊跟其后的元素就會(huì)在空間允許的情況下，向上提升到與浮動(dòng)元素平起平坐。CSS設(shè)計(jì)float屬性的主要目的是實(shí)現(xiàn)文本環(huán)繞圖片的效果。

圖2 文本環(huán)繞圖片

圖3 網(wǎng)頁(yè)布局

如圖2所示，對(duì)圖片設(shè)置float屬性時(shí)，浮動(dòng)圖片會(huì)從文檔流中被移除。如果在標(biāo)記中有文本元素跟在其后，則文本會(huì)繞開(kāi)圖片。從而達(dá)到文本環(huán)繞圖片效果。需要注意的是：浮動(dòng)非圖片元素時(shí)，必須給該元素設(shè)置寬度，否則后果難以預(yù)料。浮動(dòng)圖片元素則不需要，因?yàn)閳D片本身有其默認(rèn)的寬度。

在標(biāo)準(zhǔn)流中，塊級(jí)元素的盒子都是上下排列，行內(nèi)元素的盒子都是左右排列，如果僅僅按照標(biāo)準(zhǔn)流的方式進(jìn)行布局，就只有幾種可能性，限制太大。CSS的設(shè)計(jì)者也想到了這樣排列限制的問(wèn)題，因此又給出了float屬性進(jìn)行盒子的排列，從而使頁(yè)面排版布局的靈活性大大提高。如圖3所示，利用float屬性使得相鄰塊級(jí)元素左右排列，形成兩欄布局框架。同理，如果你創(chuàng)建了三個(gè)浮動(dòng)、固定寬度的元素，而且水平空間也足以容納它們，那么它們就會(huì)并排在一起構(gòu)成三欄布局的框架。每個(gè)元素都可以作為容器，包含其它元素。這就是使用float屬性創(chuàng)建多欄布局的原理。下面以具體網(wǎng)頁(yè)布局實(shí)例來(lái)說(shuō)明float屬性的使用，如圖4所示。

圖4 “搜索引擎”網(wǎng)頁(yè)

圖5 網(wǎng)頁(yè)布局分析

該“搜索引擎”網(wǎng)頁(yè)的主體結(jié)構(gòu)采用DIV+CSS進(jìn)行布局，從上至下整體網(wǎng)頁(yè)劃分為3個(gè)版塊。分別為#TopDiv版塊、#MainDiv版塊和#FootDiv版塊。這三個(gè)版塊都是普通的塊元素，沒(méi)有浮動(dòng)。其中，頂部的版塊#TopDiv嵌套兩個(gè)子版塊#TopDiv1和#TopDiv2，屬于左右布局結(jié)構(gòu)，使用左浮動(dòng)和右浮動(dòng)實(shí)現(xiàn)。中間版塊#MainDiv嵌套五個(gè)子版塊，屬于上中下結(jié)構(gòu)，同樣使用左浮動(dòng)和右浮動(dòng)來(lái)實(shí)現(xiàn)。頂部版塊的浮動(dòng)設(shè)置較簡(jiǎn)單，只要在子版塊#TopDiv1和TopDiv2的CSS定義中設(shè)置塊的width屬性和float屬性，代碼如下：

#TopDiv1{

float:left;

width:200px;

}

#TopDiv2{

float:right; width:200px;

}

中間版塊#MainDiv包含五個(gè)浮動(dòng)的子版塊，其中#Left-Div1和#RightDiv1的設(shè)置可參照頂部嵌套的子版塊，同理可設(shè)置#LeftDiv2和RightDiv2版塊。部分代碼如下：

#LeftDiv1{

float:left; height:150px; width:69%;

}

#RightDiv1{

float:right; height:150px; width:29%;

}

對(duì)于中間部分#SearchDiv的設(shè)置仍是采用左浮動(dòng)，并且寬度設(shè)置為100%。由于五個(gè)子版塊都是浮動(dòng)元素，并且根據(jù)浮動(dòng)元素的排列特點(diǎn)（緊靠著排列），如果要實(shí)現(xiàn)上中下的排列結(jié)構(gòu)，版塊的width屬性設(shè)置要特別注意。所以，#Left-Div1的寬度設(shè)置為69%，#RightDiv1的寬度為29%，這樣使得兩個(gè)版塊的寬度加起來(lái)恰好是父版塊#MainDiv的寬度。而#SearchDiv的寬度設(shè)置為100%，即和父版塊同寬，所以無(wú)法和#LeftDiv1、#RightDiv1排列在同一行，只能下移一行。同理，由于#SearchDiv占據(jù)了整行的寬度，#LeftDiv2、Right-Div2也必須下移一行排列，從而實(shí)現(xiàn)了上中下的布局結(jié)構(gòu)。

6 結(jié)語(yǔ)

本文介紹了盒子模型與標(biāo)準(zhǔn)文檔流的概念，闡述了盒子在標(biāo)準(zhǔn)流中的定位原則。解析了CSS中的浮動(dòng)屬性，并通過(guò)具體的網(wǎng)頁(yè)布局實(shí)例進(jìn)一步說(shuō)明浮動(dòng)屬性的用法。

[1]Charles Wyke-Smith．CSS設(shè)計(jì)指南（第3版）[M]．北京：人民郵電出版社，2013．

[2]溫謙．CSS設(shè)計(jì)徹底研究[M]．北京：人民郵電出版社，2008．

Analysis of FloatAttribute Based on CSS Box Model

Jiang YunXin
(Department of Public Basic,Fujiang Medical College,Fuzhou 350101,Fujiang)

This paper introduces the conception of box-model and normal document stream,and states the position principle of box in normal document stream.It analyzes the float attribute of CSS,and gives the method of using float by specific case.

CSS；float；box model；normal document stream

TP311

：A

1008-66609(2015)04-0060-03

蔣昀昕，女，安徽合肥人，講師，碩士，研究方向：優(yōu)化算法。