父級邊框塌陷的問題

clear

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

解決方案：

1. 增加父級元素的高度~

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

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

<div class="clear"></div>

.clear{
            clear: both;
            margin: 0;
            padding: 0;
        }
 

1. overflow

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

1.父類新增一個偽類：after

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

小結：

1. 浮動元素後面增加空div
   簡單，程式碼中儘量避免空div
2. 設定父元素的高度
   簡單，元素假設有了固定的高度，就會被限制
3. overflow
   簡單，下拉的一些場景避免使用
4. 父類新增一個偽類：after(推薦)
   寫法稍微複雜一點，但是沒有副作用，推薦使用！

對比

• display
  方向不可以控制
• float
  浮動起來的話會脫離標準文件流，所以要解決父級邊框塌陷問題。