clear屬性在CSS中的妙用
作者：admin
在DIV+CSS設(shè)計(jì)網(wǎng)頁(yè)中，使用Clear屬性可以輕松解決當(dāng)前面并列的多個(gè)DIV總寬度不足100%，下面的的DIV就很可能向上提，和上一行的并列的DIV在同一行問題。
這里向大家描述一下在CSS中clear屬性妙用，圖片和文字元素出現(xiàn)在另外元素中，那么它們(圖片和文字)可稱為浮動(dòng)元素(floatingelement)。使用clear屬性可以讓元素邊上不出現(xiàn)其它浮動(dòng)元素。
在CSS中clear屬性妙用
在DIV+CSS設(shè)計(jì)網(wǎng)頁(yè)中，經(jīng)常需要設(shè)置多個(gè)DIV并列排列，往往是使用float:left或float:right來(lái)實(shí)現(xiàn)，但問題出現(xiàn)了，當(dāng)前面并列的多個(gè)DIV總寬度不足100%，下面的的DIV就很可能向上提，和上一行的并列的DIV在同一行，這不是我們想要的結(jié)果。使用Clear屬性正好可以解決這一問題，下面引用幫助的介紹：
CSS clear屬性
圖片和文字元素出現(xiàn)在另外元素中，那么它們(圖片和文字)可稱為浮動(dòng)元素(floatingelement)。使用clear屬性可以讓元素邊上不出現(xiàn)其它浮動(dòng)元素。
注意：當(dāng)這個(gè)屬性隨著"float"屬性一起使用的話，那么結(jié)果可能會(huì)不盡如人意。
Inherited:No
繼承性：無(wú)
舉例
- <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml">
- <head>
- <metahttp-equivmetahttp-equiv="Content-Type"
- content="text/html;charset=utf-8"/>
- <title>無(wú)標(biāo)題文檔</title>
- <styletypestyletype="text/css">
- .LeftText{
- margin:3px;
- float:left;
- height:180px;
- width:170px;
- border:1pxsolid#B1D1CE;
- background-color:#F3F3F3;
- }
- .FootText{
- height:180px;
- }
- .Clear
- {
- clear:both;
- }
- </style>
- </head>
- <body>
- <divclassdivclass="LeftText">區(qū)塊1</div>
- <divclassdivclass="LeftText">區(qū)塊2</div>
- <divclassdivclass="Clear"></div>
- <divclassdivclass="FootText">區(qū)塊3</div>
- </body>
- </html>
代碼說(shuō)明：
如果沒有Clear這一層，“區(qū)塊3”會(huì)緊接區(qū)塊2并列在同一行。
加了Clear這一層后，會(huì)把上面的浮動(dòng)DIV的影響清除，使其不至影響下面DIV的布局
【編輯推薦】
- FF與IE下CSS Padding效果不同解決方案
- JavaScript動(dòng)態(tài)創(chuàng)建div屬性和樣式
- 14大CSS工具提高網(wǎng)頁(yè)設(shè)計(jì)效率
- 五大CSS3新技術(shù)用法指導(dǎo)
- 解讀DIV CSS網(wǎng)頁(yè)布局中CSS無(wú)效十個(gè)原因
責(zé)任編輯：佚名
來(lái)源：
hi.baidu.com
