第03部分-CSS技術(shù)

1、信息工程學(xué)院第3部分 CSS技術(shù)（第7、8章）引入本部分內(nèi)容1. CSS基礎(chǔ)2. CSS屬性值與單位3. CSS文本修飾應(yīng)用4. 盒子模型與標(biāo)準(zhǔn)流定位5. 背景的控制6. 相對定位與絕對定位7. 盒子浮動8. CSS+DIV布局1. CSS基礎(chǔ) CSS（Cascading Style Sheets的縮寫），是用于控制網(wǎng)頁樣式并允許將樣式與網(wǎng)頁內(nèi)容分離的一種標(biāo)記性語言。 HTML和CSS的關(guān)系就是“內(nèi)容”和“形式”的關(guān)系，由(X)HTML組織網(wǎng)頁的結(jié)構(gòu)和內(nèi)容，而通過CSS來決定頁面的表現(xiàn)形式。 目前的Web設(shè)計(jì)標(biāo)準(zhǔn)： 網(wǎng)頁的所有內(nèi)容都在XHTML網(wǎng)頁中設(shè)計(jì)； 網(wǎng)頁的所有樣式都放置在CSS中。1.

2、1 CSS的語法 CSS樣式表由一系列樣式規(guī)則組成，瀏覽器將這些規(guī)則應(yīng)用到相應(yīng)的元素上，樣式表中規(guī)則間用英文分號(;)分隔。 每條規(guī)則由兩部分組成：選擇器和聲明 。 每條聲明又是屬性和值的組合 ，屬性與值間用英文冒號 (:)分隔。1.2 在HTML中引入CSS的方法1. 直接在標(biāo)簽的style屬性進(jìn)行設(shè)置(行內(nèi)式) 格式是-某個屬性：值2. 在HTML頁面中直接使用(嵌入式) 在標(biāo)簽中加入1.2 在HTML中引入CSS的方法3. 鏈接外部樣式表（.css文件） 在head標(biāo)簽中使用 href：表示引用哪個.css文件； rel：是指在頁面中使用這個外部的樣式表 type：指文件的類型是樣式表文

3、本 4. 導(dǎo)入外部樣式表 在head標(biāo)簽中使用（這種方式不要忘了分號；)5. 鏈接與導(dǎo)入的區(qū)別 link屬于HTML標(biāo)簽，而import完全是CSS提供的一種方式。 當(dāng)一個頁面被加載的時候，link引用的CSS會同時被加載，而import引用的CSS會等到頁面全部被下載完再被加載。 import是CSS2.1提出的所以老的瀏覽器不支持，link不存在這個問題。目前使用link鏈接.CSS是個不錯的選擇！1.3 CSS選擇器 要想使CSS樣式應(yīng)用到特定的HTML元素，需要找到這個元素，執(zhí)行這一任務(wù)的樣式規(guī)則叫選擇器。1.標(biāo)簽選擇器body color:#111111; font-size:12p

4、x;img border-width:0; 對應(yīng)的標(biāo)簽對應(yīng)相應(yīng)的樣式；2.id選擇器（整個文檔中這種樣式是唯一的） 測試文本 #intro font-weight:bold; 1.3 CSS選擇器3. class選擇器 多個地方需要使用同種樣式 測試1 測試2 css樣式 .introfont-weight:bold;4. 偽類選擇器 指定的對象在文檔中并不存在，標(biāo)簽的某個狀態(tài) a:link color: #FF0000 /* 未被訪問的鏈接為紅色 */ a:visited color: #00FF00 /* 已被訪問過的鏈接為綠色 */ a:hover color: #FFCC00 /* 鼠

5、標(biāo)懸浮在上的鏈接為橙色 */ a:active color: #0000FF /* 鼠標(biāo)點(diǎn)中激活鏈接為藍(lán)色 */ I-V-H-A，請按這樣的次序，否則可能失效！1.3 CSS選擇器5. 選擇器的靈活組合 （1）（后代）嵌套選擇器 Welcome 應(yīng)用CSS #mainco pcolor:red; . 樣式定義 #HeadTop #Logo (2) 并集選擇器 選擇器將分英文逗號分隔 h1,h2 color:red; 1.4 CSS的層疊性 CSS具有兩個特性：層疊性和繼承性。所謂層疊性是指多個選擇器的作用范圍發(fā)生了疊加。 當(dāng)多個樣式規(guī)則作用于同一元素時： （1）如果多個規(guī)則未發(fā)生沖突，則元素將

6、應(yīng)用所有規(guī)則。 （2）如果多個樣式規(guī)則發(fā)生了沖突，則CSS按照選擇器的優(yōu)先級高低來處理。 行內(nèi)樣式 ID樣式 類樣式 標(biāo)記樣式 如果優(yōu)先級相同,則以后定義的為準(zhǔn)（一般情況下）1.5 CSS的繼承性 CSS的繼承性是指如果子元素定義的樣式?jīng)]有和父元素定義的樣式發(fā)生沖突，那么子元素將繼承父元素的樣式風(fēng)格，并可以在父元素的基礎(chǔ)上再加以修改，定義自己的新屬性。 合理利用CSS的繼承性，可以大大縮減代碼量，并提高可讀性。 需要注意：并不是所有的CSS屬性都具有繼承性，具體可參考CSS手冊。本部分內(nèi)容1. CSS基礎(chǔ)2. CSS屬性值與單位3. CSS文本修飾應(yīng)用4. 盒子模型與標(biāo)準(zhǔn)流定位5. 背景的控制

7、6. 相對定位與絕對定位7. 盒子浮動8. CSS+DIV布局 值是對屬性的具體描述，而單位是值的基礎(chǔ)。 在大多數(shù)情況下，沒有單位的值，瀏覽器將不知如何處理。 在CSS中較復(fù)雜的值和單位有： 顏色 長度（大?。?顏色的值 CSS中定義顏色值可以使用命名顏色、rgb顏色和十六進(jìn)制顏色三種方法。 命名顏色 顏色的英文名稱，如：red、blue等 rgb顏色函數(shù) 按三原色原理合成顏色，如：rgb(255,128,0) 十六進(jìn)制顏色描述 按三原色原理合成顏色，如：#FF8800本部分內(nèi)容1. CSS基礎(chǔ)2. CSS屬性值與單位3. CSS文本修飾應(yīng)用4. 盒子模型與標(biāo)準(zhǔn)流定位5. 背景的控制6. 相對

8、定位與絕對定位7. 盒子浮動8. CSS+DIV布局CSS文本修飾應(yīng)用 網(wǎng)頁中文字的美化是網(wǎng)頁美觀的一個基本要求，通過CSS的強(qiáng)大的文本修飾功能，可以對網(wǎng)頁中的文字進(jìn)行更精細(xì)的控制。 CSS中控制文本樣式的屬性主要有： “font-”開頭的屬性 “text-”開頭的屬性 修改文本顏色的“color”屬性 行高“l(fā)ine-height”屬性本部分內(nèi)容1. CSS基礎(chǔ)2. CSS屬性值與單位3. CSS文本修飾應(yīng)用4. 盒子模型與標(biāo)準(zhǔn)流定位5. 背景的控制6. 相對定位與絕對定位7. 盒子浮動8. CSS+DIV布局盒子模型與標(biāo)準(zhǔn)流定位 在網(wǎng)頁的布局和頁面元素的表現(xiàn)方面，最重要的是CSS的盒子模型

9、以及盒子在瀏覽器中的排列。 盒子模型是CSS的基石之一，它指定元素如何顯示以及如何相互交互。頁面上的每個元素都被瀏覽器看成是一個矩形的盒子，這個盒子由元素的內(nèi)容、填充、邊框與邊界組成。 網(wǎng)頁就是由許多個盒子通過不同的排列方式（上下、左右、嵌套）組合而成。4.1 盒子模型基礎(chǔ)marginmargin：邊界：邊界，四個方向?yàn)閙argin-top，margin-right，margin-bottom，margin-leftborderborder：邊框：邊框，四個方向?yàn)閎order-top，border-right，border-bottom，border-leftpaddingpadding：填充

10、：填充，四個方向?yàn)閜adding-top，padding-right，padding-bottom，padding-leftcontentcontent：主體內(nèi)容：主體內(nèi)容說明： 在左圖中，盒子模型，不包括最外的黑色框。4.1.1 盒子大小計(jì)算 在利用盒子排版時，就要精確的理解盒子大小的計(jì)算方法。 盒子模型中的填充、邊框、邊界值都可以通過相應(yīng)屬性分別來設(shè)置，內(nèi)容區(qū)的大小可以通過width和height來設(shè)置。 填充、邊框和邊界值的變化，不會影響內(nèi)容區(qū)域的大小，便會使得盒子的大小發(fā)生變化。 例如下面的樣式 #MyBox margin:10px; padding:5px; border-width

11、:0px; width:70px; /內(nèi)容的寬度 這個區(qū)域的寬度=左邊距+左邊框+左填充+內(nèi)容寬度+ 右填充+右邊框+右邊距 = 10px+0px+5px+70px+5px+0px+10px = 100px4.1.2 邊框?qū)傩?盒子模型中的margin和padding屬性比較簡單，只能設(shè)置其大小。 邊框可以設(shè)置寬度、顏色和樣式。border屬性主要有三個：border-width、border-color、border-style。 其中border-style屬性在不同的瀏覽器中，如IE、Firefox和Chrom等中略有差別。4.1.3 盒子模型屬性的縮寫 盒子邊界、填充或邊框?qū)挾鹊目s寫

12、如只給定一個值，則表示其上下左右的值都相同 如給定兩個值，則分別表示上下、左右的值 如給定三個值，則分別表示上、左右、下的值 如給定四個值，則分別表示上、右、下、左的值 邊框border屬性的縮寫 border: border-width | border-style | border-color 可以分別設(shè)置border-style和border-color 可以類似這樣：border-right-color 、border-top-color4.1.4 盒子模型屬性的默認(rèn)值 大多數(shù)HTML元素的盒子屬性（margin、padding、border-width）默認(rèn)值為0。 有少數(shù)HTML元

13、素的margin和padding的默認(rèn)值 不為0，如：body、p、ul、li等。 表單元素中大部分input元素的邊框?qū)傩阅J(rèn)值 不為0。4.2 盒子模型的應(yīng)用 1. 美化表單 網(wǎng)頁中的表單控件在默認(rèn)情況下背景都是灰色的，文本框邊框是粗線條帶立體感的，不夠美觀?？梢酝ㄟ^CSS改變表單的邊框樣式、顏色和背景顏色讓文本框，按鈕等變得漂亮些。 課堂演示 “標(biāo)準(zhǔn)文檔流”（Normal Document Stream），簡稱“標(biāo)準(zhǔn)流”，是指在不使用其他與排列和定位相關(guān)的特殊CSS規(guī)則時，各種元素的排列規(guī)則。4.3 盒子在標(biāo)準(zhǔn)流下的定位4.3.1 行內(nèi)元素與塊元素 行內(nèi)元素(inline)是指元素與元素

14、之間從左到右并排排列，只有當(dāng)瀏覽器窗口容納不下才會轉(zhuǎn)到下一行，塊級元素(block)是指每個元素占據(jù)瀏覽器一整行位置，塊級元素與塊級元素之間自動換行，從上到下排列。 塊級元素內(nèi)部可包含行內(nèi)元素或塊級元素，行內(nèi)元素內(nèi)部可包含行內(nèi)元素，但不得包含塊級元素，另外，塊級元素元素內(nèi)部也不能包含其他的塊級元素。 1塊級元素（block level） li占據(jù)著一個矩形的區(qū)域，并且和相鄰的li依次豎直排列，不會排在同一行中。 ul也具有同樣的性質(zhì)，占據(jù)著一個矩形的區(qū)域，并且和相鄰的ul依次豎直排列，不會排在同一行中。 因此，這類元素稱為“塊級元素”（block level），即它們總是以一個塊的形式表現(xiàn)出來

15、，并且跟同級的兄弟塊依次豎直排列，左右撐滿。2行內(nèi)元素（inline） 對于文字這類元素，各個字母之間橫向排列，到最右端自動折行，這就是另一種元素，稱為“行內(nèi)元素”（inline）。 比如標(biāo)記，就是一個典型的行內(nèi)元素，這個標(biāo)記本身不占有獨(dú)立的區(qū)域，僅僅是在其他元素的基礎(chǔ)上指出了一定的范圍。 再比如，最常用的標(biāo)記，也是一個行內(nèi)元素。3 div與span div span div與span的區(qū)別 div標(biāo)記不同行： span標(biāo)記同一行： 與與標(biāo)記的區(qū)別標(biāo)記的區(qū)別4.3.2 盒子在標(biāo)準(zhǔn)流中的定位原則行內(nèi)元素與塊元素之間的水平margin行內(nèi)元素之間的行內(nèi)元素之間的margin4.3.3 塊級元素之間

16、的豎直margin 如果不是行內(nèi)元素，而是豎直排列的塊級元素，margin的取值情況就會有所不同。 兩個塊級元素之間的距離不是margin-bottom與margin-top的總和，而是兩者中的較大者，如圖所示。圖圖4.20 塊元素之間的塊元素之間的margin 這個現(xiàn)象稱為margin的“塌陷”（或稱為“合并”）現(xiàn)象，意思是說較小的margin塌陷（合并）到了較大的margin中。4.3.4 嵌套盒子之間的margin 除了上面提到的行內(nèi)元素間隔和塊級元素間隔這兩種關(guān)系外，還有一種位置關(guān)系，它的margin值對CSS排版也有重要的作用，這就是父子關(guān)系。 當(dāng)一個塊包含在另一個塊中時，便形成了典

17、型的父子關(guān)系。 其中子塊的margin將以父塊的內(nèi)容為參考，如圖所示。 父子塊的父子塊的margin IE與與Firefox對待父對待父height的不同處理的不同處理4.3.5 margin屬性可以設(shè)置為負(fù)值 上面提及margin的時候，它的值都是正數(shù)。 其實(shí)margin的值也可以設(shè)置為負(fù)數(shù)，而且有關(guān)的巧妙運(yùn)用方法也非常多，在后續(xù)學(xué)習(xí)中都會續(xù)介紹。 當(dāng)margin設(shè)為負(fù)數(shù)時，會使被設(shè)為負(fù)數(shù)的塊向相反的方向移動，甚至覆蓋在另外的塊上。 父子塊設(shè)置父子塊設(shè)置margin為負(fù)數(shù)為負(fù)數(shù)本部分內(nèi)容1. CSS基礎(chǔ)2. CSS屬性值與單位3. CSS文本修飾應(yīng)用4. 盒子模型與標(biāo)準(zhǔn)流定位5. 背景的控制

18、6. 相對定位與絕對定位7. 盒子浮動8. CSS+DIV布局CSS的背景屬性 背景（background）是網(wǎng)頁中常用的一種表現(xiàn)方法，無論是單純的背景顏色還是背景圖片，都能為網(wǎng)頁帶來豐富的視覺效果。 HTML的很多元素都具有bgcolor和backgroud屬性，可以設(shè)置背景顏色和背景圖片，如（table、td等），但形式比較單一，對背景圖片的設(shè)定，只支持在X軸和Y軸都平鋪的方式。CSS的背景屬性 CSS對元素的背景設(shè)置，則提供了更多的途徑，如背景圖片既可以平鋪也可以不平鋪，還可以在X軸平鋪或在Y軸平鋪，當(dāng)背景圖片不平鋪時，并不會完全擋住背景顏色，因此可以綜合設(shè)置背景顏色和背景圖片達(dá)到希望的

19、效果。 CSS的背景屬性是backgroud或以backgroud開頭 CSS的背景屬性屬性屬性描述描述可用值可用值background設(shè)置背景的所有控制選項(xiàng)，設(shè)置背景的所有控制選項(xiàng)，是其他所有背景屬性的縮寫是其他所有背景屬性的縮寫其他背景屬性的值的集合其他背景屬性的值的集合background-color設(shè)置背景顏色設(shè)置背景顏色rgb顏色顏色命名顏色命名顏色16進(jìn)制顏色進(jìn)制顏色background-image設(shè)置背景圖片設(shè)置背景圖片urlbackground-repeat設(shè)置背景圖片的平鋪設(shè)置背景圖片的平鋪方式方式repeat（完全平鋪）（完全平鋪）repeat-x（橫向平鋪）（橫向平鋪）r

20、epeat-y（縱向平鋪）（縱向平鋪）no-repeat（不平鋪）（不平鋪）background-attachment設(shè)置背景圖片固定還設(shè)置背景圖片固定還是隨內(nèi)容滾動是隨內(nèi)容滾動scroll（默認(rèn)值）（默認(rèn)值）fixedbackground-position設(shè)置背景圖片顯示的設(shè)置背景圖片顯示的起始位置起始位置（top leftcenter centerbottom right）（x% y%x-pos y-pos）各個背景屬性的默認(rèn)值 background-color: transparent 透明模式 background-image: none background-repeat: repe

21、at平鋪 background-attachment: scroll background-position: 0% 0%background屬性的縮寫 background屬性是所有背景屬性的縮寫形式，就像font屬性一樣，其縮寫順序?yàn)椋?background: background-color | background-image | background-repeat | background-attachment | background-position如body background:#EFF4FF url(images/body_bg.jpg) repeat-x fixed;本部

22、分內(nèi)容1. CSS基礎(chǔ)2. CSS屬性值與單位3. CSS文本修飾應(yīng)用4. 盒子模型與標(biāo)準(zhǔn)流定位5. 背景的控制6. 相對定位與絕對定位7. 盒子浮動8. CSS+DIV布局（1）標(biāo)準(zhǔn)流）標(biāo)準(zhǔn)流 學(xué)完盒子模型之后知道網(wǎng)頁是由一個個的盒子組成的， 那么在最簡單的不包含CSS的頁面里，瀏覽器怎樣定位各種盒子呢？ 在這種情況下，瀏覽器會根據(jù)各個盒子在瀏覽器會根據(jù)各個盒子在html中出現(xiàn)的順序，中出現(xiàn)的順序，由上而下由上而下一個接一個一個接一個的排的排列列，把這樣方式稱作“流”，這種流稱之為“標(biāo)準(zhǔn)流標(biāo)準(zhǔn)流”。 這種方式可用CSS屬性position：static控制。6 相對定位與絕對定位 （2）相對

23、定位）相對定位 使用CSS屬性 position：relative，在相對定位下，元素的位置相對于它本來該出現(xiàn)的位置它本來該出現(xiàn)的位置的偏移。 （2）相對定位）相對定位 使用CSS屬性 position：relative，在相對定位下，元素的位置相對于它本來該出現(xiàn)的位置它本來該出現(xiàn)的位置的偏移。 標(biāo)準(zhǔn)流中它應(yīng)該出現(xiàn)的位置標(biāo)準(zhǔn)流中它應(yīng)該出現(xiàn)的位置（3）絕對定位）絕對定位 使用CSS屬性position:absolute，在絕對定位下，元素的位置相對于“最近最近”的“已定位已定位”的“祖先祖先”元素。 （3）絕對定位）絕對定位 使用CSS屬性position:absolute，在絕對定位下，元素的

24、位置相對于“最近最近”的“已定位已定位”的“祖先祖先”元素。 已定位已定位：position屬性被設(shè)置且不是屬性被設(shè)置且不是static。 祖先祖先：從該元素開始一直到：從該元素開始一直到根根節(jié)點(diǎn)的所有節(jié)點(diǎn)的所有元素。元素。 最近最近：距該元素距離最短的一個節(jié)點(diǎn)。：距該元素距離最短的一個節(jié)點(diǎn)。標(biāo)準(zhǔn)流中盒子的位置關(guān)系標(biāo)準(zhǔn)流中盒子的位置關(guān)系使用了絕對定位后盒子的位置關(guān)系使用了絕對定位后盒子的位置關(guān)系(2)(2)使用了絕對定位后盒子的位置關(guān)系使用了絕對定位后盒子的位置關(guān)系(1)(1)攝影師個人網(wǎng)站布局實(shí)例攝影師個人網(wǎng)站布局實(shí)例 (一)內(nèi)容分析 內(nèi)容決定網(wǎng)頁形式1.作品列表2.名稱3.宣傳語4.簡介5

25、.相關(guān)鏈接6.聯(lián)系方式 (二)HTML結(jié)構(gòu)設(shè)計(jì) 根據(jù)內(nèi)容設(shè)計(jì)出合理的XHTML文件結(jié)構(gòu)。 不關(guān)心顯示效果，完全從網(wǎng)頁的內(nèi)容出發(fā)。(三)原型設(shè)計(jì)(三) CSS設(shè)計(jì)(1)(三) CSS設(shè)計(jì)(2)本部分內(nèi)容1. CSS基礎(chǔ)2. CSS屬性值與單位3. CSS文本修飾應(yīng)用4. 盒子模型與標(biāo)準(zhǔn)流定位5. 背景的控制6. 相對定位與絕對定位7. 盒子浮動8. CSS+DIV布局盒子的浮動 在標(biāo)準(zhǔn)流中，塊級元素的盒子都是上下排列，行內(nèi)元素的盒子都是左右排列，如果僅僅按照標(biāo)準(zhǔn)流的方式進(jìn)行排列，就只有這幾種可能性，限制太大。CSS的制訂者也想到了這樣排列限制的問題，因此又給出了浮動和定位方式進(jìn)行盒子的排列，從而

26、使排版的靈活性大大提高。盒子的浮動 例如：有時希望相鄰塊級元素的盒子左右排列（所有盒子浮動）或者希望一個盒子被另一個盒子中的內(nèi)容所環(huán)繞（一個盒子浮動）做出圖文混排的效果，這時最簡單的辦法就是運(yùn)用浮動（float）屬性使盒子在浮動方式下定位。 在標(biāo)準(zhǔn)流中，一個塊級元素在水平方向會自動伸展，在它的父元素中占滿整個一行；而在豎直方向和其他元素依次排列，不能并排，如圖所示。使用“浮動”方式后，這種排列方式就會發(fā)生改變。 CSS中有一個float屬性，默認(rèn)值為none，也就是標(biāo)準(zhǔn)流通常的情況，如果將float屬性的值設(shè)為left或right，元素就會向其父元素的左側(cè)或右側(cè)靠緊，同時盒子的寬度不再伸展，而

27、是收縮，在沒設(shè)置寬度時，會根據(jù)盒子里面的內(nèi)容來確定寬度。1. 一個盒子浮動1. 一個盒子浮動 接下來在上述代碼中添加一條CSS代碼，使元素“.son1”浮動。代碼如下： .son1float:left; 此時顯示效果如圖4-63所示，可發(fā)現(xiàn)給“.son1”添加浮動屬性后，“.son1”的寬度不再自動伸展，而且不再占據(jù)原來瀏覽器分配給它的位置。如果再在未浮動的盒子Box-2中添一行文本，就會發(fā)現(xiàn)“.son2”中的內(nèi)容是環(huán)繞著浮動盒子的 總結(jié)：一個盒子浮動后的特點(diǎn) （1）浮動后的盒子將以塊級元素顯示，但寬度不會自動伸展。 （2）浮動的盒子將脫離標(biāo)準(zhǔn)流，即不再占據(jù)瀏覽器原來分配給它的位置（IE有時例

28、外）。 （3）未浮動的盒子將占據(jù)浮動盒子的位置，同時未浮動盒子內(nèi)的內(nèi)容會環(huán)繞浮動后的盒子。總結(jié)：一個盒子浮動后的特點(diǎn) 提示：所謂“脫離標(biāo)準(zhǔn)流”是指元素不再占據(jù)在標(biāo)準(zhǔn)流下瀏覽器分配給它的空間，其他元素就好像這個元素不存在一樣。例如圖4-63中，當(dāng)Box-1浮動后，Box-2就頂?shù)搅薆ox-1的位置，相當(dāng)于Box-2視Box-1不存在一樣。但是，浮動元素并沒有完全脫離標(biāo)準(zhǔn)流，這表現(xiàn)在浮動盒子會影響未浮動盒子中內(nèi)容的排列，例如Box-2中的內(nèi)容會跟在Box-1盒子之后進(jìn)行排列，而不會忽略Box-1盒子的存在。 2. 多個盒子浮動 多個盒子都浮動后，就產(chǎn)生了塊級元素水平排列的效果 多個浮動元素不會相互

29、覆蓋，一個浮動元素的外邊界（margin）碰到另一個浮動元素的外邊界后便停止運(yùn)動。 若包含的容器太窄，無法容納水平排列的多個浮動元素，那么最后的浮動盒子會向下移動（圖4-68）。但如果浮動元素的高度不同，那當(dāng)它們向下移動時可能會被卡住 4.7.2 浮動的清除 clear是清除浮動屬性，它的取值有l(wèi)eft、right、both和none（默認(rèn)值），如果設(shè)置盒子的清除浮動屬性clear值為left或right，表示該盒子的左邊或右邊不允許有浮動的對象。值設(shè)置為both則表示兩邊都不允許有浮動對象，因此該盒子將會在瀏覽器中另起一行顯示 clear屬性既可以用在未浮動的元素上，也可以用在浮動的元素上，

30、如果對Box-3同時設(shè)置清除浮動和浮動，即： .son3clear:both; float:left; 總結(jié)：清除浮動是清除其它盒子浮動對該元素的影響，而設(shè)置浮動是讓元素自身浮動，兩者并不矛盾，因此可同時設(shè)置元素清除浮動和浮動 4.7.3 浮動的瀏覽器解釋問題 1. 元素浮動但是其父元素不浮動 當(dāng)設(shè)置了父元素的寬度或高度后，IE （非標(biāo)準(zhǔn)瀏覽器）中的浮動元素將占據(jù)外圍容器空間，F(xiàn)irefox依然不占據(jù) 3. 元素浮動但是其后面相鄰元素不浮動 設(shè)置了后面相鄰元素的寬或高，則在IE中，浮動元素將仍然占據(jù)它原來的空間，未浮動元素跟在它后面 浮動的瀏覽器顯示問題總結(jié)情 況未浮動的盒子不設(shè)寬或高對未浮動

31、的盒子設(shè)置寬或高盒子浮動，其外層盒子未浮動IE和Firefox的顯示效果一致IE浮動盒子將不會脫離標(biāo)準(zhǔn)流，F(xiàn)irefox浮動盒子仍然是脫離標(biāo)準(zhǔn)流的盒子浮動，后面相鄰盒子未浮動 IE 6浮動元素的雙倍margin錯誤 在IE6中，只要設(shè)置元素浮動，則設(shè)置左浮動，盒子的左margin會加倍，設(shè)置右浮動，盒子的右margin會加倍。這是IE6的一個bug（IE7已經(jīng)修正了這個bug）。 解決IE 6雙倍margin錯誤的方法很簡單，只要對浮動元素設(shè)置“display:inline;”就可了。代碼如下： .son1float:left; display:inline; 提示，即使對浮動元素設(shè)置“display:inline;”，它仍然會以塊級元素顯示，因?yàn)樵O(shè)置元素浮動后元