clear

clear:right; 左側不允許有浮動元素
clear:left; 右側不允許有浮動元素
clear:both; 兩側不允許有浮動元素
clear:none;

解決方案

1.增加父級元素的高度

#father{ border:1px solid #000; height:800px; }

2.增加一個空的div標籤，清除浮動

<div class="clear"><div>
.clear{ clear:both; margin:0; padding:0; }

3.overflow

在父級元素中增加一個 overflow：hidden

4.父類中新增一個偽類 :after

#father:after{ content:''; display:block; clear:both; }

小結

1.浮動元素後面增加空div

簡單，程式碼中儘量避免空div

2.設定父元素的高度

簡單，元素假設有了固定高度，就會被限制

3.overflow

簡單，下拉的一些場景避免使用

4.父類新增一個偽類 :after (推薦)

寫法稍微複雜一些，但是沒有副作用，推薦使用！

對比

display
方向不可以控制

float
浮動起來的話會脫離標準文件流，所以要解決父級邊框塌陷的問題