還記得第二課我們做的例子的效果麼？最後效果是，紅色方塊和藍色方塊都處於一行，我們使用「float:left」，打擊了塊狀元素的「霸道」即塊狀元素不允許其他元素和它處於同一行。我們將紅色方塊的css**中加入了「float:left;」後，紅色方塊終於允許藍色方塊和它處於同一行。如圖：
我們換一種方法表達上面的意思，因為紅色方塊的「左側浮動」，才導致藍色方塊上移至紅色方塊的尾後；
在上個例子中，為了達到瀏覽器相容性，我們分別在紅色藍色方塊css**中分別加了「float:left;」，這樣ie和ff中顯示效果一樣，如果此時我們還想放乙個寬度400畫素，高度100的綠色方塊，並讓其處於第二行，效果如下圖：
可是這時候不管怎麼放，在ie中的效果始終是
導致綠色拍到藍色的後面這種情況就是因為藍色方塊css**中含有"float:left;"，但是為了瀏覽器相容性，又不能去掉(什麼？這句話看不明白，只能說明第二節課你沒有好好學，好好品味！)，怎麼辦？
好辦~！只要在css**中加入下面這段**：
複製**
**如下:
.clear
並在html**中加入下面**：
複製**
**如下:
上面這句話究竟加在那個位置呢，要加在藍色方塊和綠色方塊中間，然後看看效果是不是我們想要的了~^_^
複製**
**如下:
部落格的左側
部落格的右側
部落格的版權資訊
css之clear 清除浮動
哈哈哈哈哈哈哈，我懂了原理啦 clear清除的是浮動的高度 就是跑到位置 而不影響浮動的方向.原理如下 clear清除的是元素本身，但不會影響方向。通俗點說就是clear清除的是浮動產生的文件流。舉個例子，就是有2個div,當第二個div產生浮動時，第二個div會脫離第二行，到達第一行。當你清除它的...
clear清除浮動標籤
1 清除浮動clear clear right 清除右浮動造成的影響 clear left 清除左浮動造成的影響 clear both 清除兩邊浮動造成的影響 注意 在浮動後面的盒子上設定清除樣式 即那個受影響就在誰上面設定 2 overflow 超出部分如何處理 overflow hidden 超...
深入理解CSS清除浮動與clear屬性
相信作為一名前端工作人員，一定遇到過或是被問過清除浮動這一問題，一般我們會說 元素新增float屬性後，其父元素不會被撐開，解決這個問題的過程就稱為清除浮動。沒有問題，假如再深入問一點，為什麼新增float屬性之後會出現這樣的情況，有幾種清除浮動的方法。浮動的案例 父元素沒有被撐開 class co...