網站開發進階(四十二)巧用clear:both

網站開發進階(四十二)巧用clear:both

前言

我們在制作網頁中用div+css或者稱xhtml+css都會遇到一些很詭異的情況，明明布局正確，但是整個畫面卻混亂起來了，有時候在IE6下看的很正常的，到ie7或者火狐下看時，就一片混亂了，無論怎么計算，就是不能將排版改正過來。其實，這一切都是浮動搞得鬼，也就是css中的float，要解決情況，就需要使用clear:both了。

CSS手冊上是這樣說明的：該屬性的值指出了不允許有浮動對象的邊。這個屬性是用來控制float屬性在文檔流的物理位置的。

當屬性設置float（浮動）時，其所在的物理位置已經脫離文檔流了，但是大多時候我們希望文檔流能識別float（浮動），或者是希望float（浮動）后面的元素不被float（浮動）所影響，這個時候我們就需要用clear:both;來清除。

在開發中，從美工MM給你Html代碼中，肯定能經常看

你可以將此部分代碼放到一個HTML頁面看看效果，然后在去掉

如圖：

（1）有clear:both的：

（2）無clear:both的

這樣看，應該就一目了然了：原來后邊的Clear:both;其實就是利用清除浮動來把外層的div撐開，所以有時候，我們在將內部div都設置成浮動之后，就會發現，外層div的背景沒有顯示，原因就是外層的div沒有撐開，太小，所以能看到的背景僅限于一條線。

美文美圖

云速建站 網站

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。