溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
CSS中clear屬性如何使用，針對這個問題，這篇文章詳細介紹了相對應的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。
在CSS中clear屬性妙用
在DIV+CSS設計網頁中，經常需要設置多個DIV并列排列，往往是使用float:left或float:right來實現，但問題出現了，當前面并列的多個DIV總寬度不足100%，下面的的DIV就很可能向上提，和上一行的并列的DIV在同一行，這不是我們想要的結果。使用Clear屬性正好可以解決這一問題，下面引用幫助的介紹：
CSS clear屬性
圖片和文字元素出現在另外元素中，那么它們(圖片和文字)可稱為浮動元素(floatingelement)。使用clear屬性可以讓元素邊上不出現其它浮動元素。
注意：當這個屬性隨著"float"屬性一起使用的話，那么結果可能會不盡如人意。
Inherited:No
繼承性：無
舉例
<!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>無標題文檔</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">區塊1</div> <divclassdivclass="LeftText">區塊2</div> <divclassdivclass="Clear"></div> <divclassdivclass="FootText">區塊3</div> </body> </html>代碼說明：
如果沒有Clear這一層，“區塊3”會緊接區塊2并列在同一行。
加了Clear這一層后，會把上面的浮動DIV的影響清除，使其不至影響下面DIV的布局
關于CSS中clear屬性如何使用問題的解答就分享到這里了，希望以上內容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關注億速云行業資訊頻道了解更多相關知識。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
