清除浮動是什么意思？

什么是清除浮動

好奇心害死人

2016-08-04

源自：網頁布局基礎 3-4

關注問題我要回答

1260

操作

收起

2 回答

慕萊塢9220042 回答被采納 +3 積分
2016-08-04

DIV層內的元素在使用了float屬性后無法自動改變高度的解決辦法：

有的時候為了讓外側層根據內容自動調整，沒有設置高度或寬度，一般都會正常顯示。
但如果層內元素使用了float屬性，就會使那些元素脫離文件流，就無法再擴充容器層，就會導致外層大小無法根據內容自動調整。
關于這個問題，總結出以幾種在當下幾種主流瀏覽器都兼容的方法，供大家參考。

1.清除浮動
在層中的有浮動屬性的元素最后邊加上來清除?
<divstyle="background:#eee;"><divstyle="height:100px;width:100px;background:Green;?
float:left;"></div><divstyle="height:100px;width:100px;background:Red; float:right;"></div>style="clear:both;">></div>

2.將display設置為table
一般來說，外層寬度都是固定的，設置寬度后可以將外層的顯示模式設置為：display:table

<divstyle="background:#eee;?
width:500px;display:table;"><divstyle="height:100px;width:100px;background:Green;?
float:left;"></div><divstyle="height:100px;width:100px;background:Red; float:right;"></div></div>

3.添加overflow設置為hidden
將外層的overflow設置為：hidden:

<divstyle="background:#eee;overflow:hidden;?
"><divstyle="height:100px;width:100px;background:Green; float:left;"></div><divstyle="height:100px;width:100px;background:Red; float:right;"></div></div>