當父級中子元素浮動，子元素就脫離文檔流了，從而就不能支持父級元素

父元素可以參照子元素自定義一個合適的高度

應用場景：

已知子元素的高度，并且子元素高度相同，最適合使用父級自定義高度，比如:導航條

劣勢：當子元素高度未知時，無法自定義父級高度

任何設置了BFC的元素，和浮動的元素相遇時，都可以實現"自動填充"的適應布局。

簡單來說：父級元素設置了BFC結界后，子元素浮動，父元素高度會自動填充(自動適配)，解決父級高度坍塌

應用場景：

子元素高度未知，子元素不會超出父級范圍

overflow:hidden/auto/scroll??觸發父元素的BFC

clear屬性專門解決float帶來的高度坍塌問題

1. clear會讓前面的浮動元素和當前元素換行顯示，對后面的浮動元素無法起到作用

2. 清除指的是清除前面"哥哥們"浮動對父元素產生的不支撐效果

3. 使用clear的元素自己不可以浮動，要保持在文檔流中替前面浮動走的哥哥收尾，支撐父級

4.?clear屬性只對塊級元素生效

劣勢：可以使用父元素中最后一個子元素，犧牲自我(寬高都是0)，清除前面浮動元素帶來的高度坍塌影響，但會造成后臺遍歷數據多一個孩子

讓父元素也通過float浮動脫離文檔流，這時父級與子級就成為了同層元素

父元素脫離文檔流還會產生問題，可能會影響到父元素的父元素，導致上層元素依然需要處理高度坍塌的問題

浮動的屬性不會繼承，此處方式盡量少用，因為會出現連帶反應，還得解決父級的父級

/* 給浮動元素li的父級的最后生成一個空白子元素，變塊級，清影響 */

.clearfix::after {

content: ''; /* 在父元素體內的最后生成一個新的空白子元素 */

display: block; /* 只有塊級元素才能使用clear屬性 */

clear: both; /* 清除前面所有哥哥們朝兩個方向浮動帶來的影響 */

}

使用父元素的::after 模擬一個假孩子，并且::after生成的偽元素剛好在父元素內部的最末尾，方便清除前面哥哥們浮動對父元素造成的高度坍塌影響

注意！！！這個假孩子要變塊級并且使用clear:both;