三個div都做浮動，給第二個div加上clear:both為什麼右邊的還是在本行浮動？（clear:right無效）

01-16

& && && && &
三個div都做浮動
給第二個div加上clear:both為什麼右邊的還是在本行浮動

clear 是清除本元素【之前】的元素。

之前：指的是在文檔流里，寫在div2前面的元素。不會影響到它後面的元素。

所以，2前面的1左浮動了，2設置clear:both，所以2會在1下面。

而2左浮動，所以3在2的右邊。

經驗分享：CSS浮動(float,clear)通俗講解

博客提到「對於CSS的清除浮動(clear)，一定要牢記：這個規則只能影響使用清除的元素本身，不能影響其他元素。」

我的理解是：對於題主的代碼，已經改變了div2的位置使它在div1下面了，現在div3在div2右邊，這時候對div2設置clear:both不能改變div3的分布。

1，clear只對本身有效，不是清楚別的元素

2，瀏覽器按順序渲染的

div1在第一行沒問題。

div2想在第一行，但是有clear: both,所以在下一行渲染。最終在第二行的左邊

div3時，瀏覽器還是在第二行渲染，此時clear:both對div3不管用，因為clear只是div2調用的，對div3沒用。最終，div3在第二行的div2後面

可以再加個例子證明一下，clear只對本身有作用。

加一個div4為float: right; clear:left

此時瀏覽器還在第二行開始渲染，但是第二行左邊有浮動元素div2和div3. 所以瀏覽器換到第四行開始渲染。最終，div4會在第三行的右邊，而不是第二行的右邊，雖然這裡還有位置

clear:both是指不允許元素浮動在該元素的兩側。

第二個div被「擠到」第一個div的下方很好理解，因為第一個div浮動在了第二個div的左側。

但是你說的「給第二個div加上clear:both為什麼右邊的還是在本行浮動」是有問題的，因為最後兩個div的行為不是第三個div浮動在第二個div的右側，而是第二個div浮動在了第三個div的左側。這種情況不滿足clear:both的條件，所以沒有清除浮動。在第三個div上加clear:left,它就被擠下去了。

建議題主先把clear:both分別換成clear:left和clear:right對比一下，然後把float:left換成float:right再做測試。

我是前端新手，如有答錯希望指正

其實div2的clear:float屬性起作用了，div1和div3的浮動確實被清除了。

你疑惑的是為什麼div3在div2右側吧？因為div2本身也有float:left樣式啊，所以應該理解成是div2 浮動到div3左側,而不是div3浮動到div2的右側。clear:both是不能清除自己的浮動屬性的。

規範說：

Applies to:block-level elements

http://www.w3.org/TR/CSS21/visuren.html#propdef-clear

你把clear屬性用在float元素上完全沒有作用。你這個根本就沒有清除任何浮動，連第一也沒有。上面那些解釋完全是按照結果在湊。

首先支持東泉的回答和推薦的博客，浮動的精髓在那篇博客里基本囊括。

你可以把盒子想像成人與人之間，你不想和別人靠的那麼近了,你怎麼辦？讓他滾？還是你自己離開？當然後者啊，所以你想不靠那麼近（清楚浮動影響），就從自己下手。

舉個栗子：你有個朋友B（有左浮動屬性），你是A（有左浮動屬性），你倆怎麼著？他靠著牆，你靠著他。有天你不想和他在一起玩了，怎麼辦？你主動靠上去的，你就把那個主動靠上去的力量消除就好了。別人做什麼變化沒用的，你主動靠上去的力量還在，你還是會粘著別人。

其實例子舉得勉強點。推薦看看那篇博客。在想這個例子，可能會好點。

& && && && && &

那我想問下，如果div2是對自身起作用，且為左右都不能為浮動，當右邊遇到div3為什麼不繼續換到下一行，div3則浮動到第二行最左邊？

clear:both 為什麼不起作用？ - 田雅文的回答

突然找到這個回答。。感覺解釋的通了

回到題主的問題，由於瀏覽器是按順序render（這個我也不好翻譯。。）元素的，對#div1和#div2都聲明了浮動向左，那麼這個時候#div1之前是沒有其他浮動元素的，clear：both並不會對之後的#div2產生影響，而相對#div2，由於它之前的#div1聲明向左浮動，也就給#div2留出了一部分空間，那麼由於#div1聲明的向左浮動，#div2默認會自動補全，這個時候再對#div2聲明clear:both就會起作用，它就跑到下面去了。

clear只針對你所定義的這個元素。

以你的問題為例，你要同時給最後那個div添加一個clear屬性。

clear屬性運用在浮動元素上不起作用。這個方法本來就有點不對。

& && && && && &

clear：left屬性只是消除其左側div浮動對自己造成的影響，會使得前兩個盒子已經消除了浮動。重新佔據了文檔流。但是clear:left只是改變左側的盒子的影響，第三個盒子在右邊而不會受此影響。

在父容器看來，三個div還是浮動的，所以高度依舊是塌陷。