css 清除浮動float 嗒嘀嗒滴 ----20181120

1. 手動給父元素添加高度
2. 通過clear清除內部和外部浮動
3. 給父元素添加overfloat屬性并結合zoom:1使用
4. 給父元素添加浮動　　　　　　　　

　　　　常用方法：

　　　　　　①```給兄弟元素添加clear屬性：添加一個class為clear：both，

　　　　　　②```添加偽類：.clearfix:after {? ? ? ?<----在類名為“clearfix”的元素內最后面加入內容；

? ? 　　　　　　　　　　　　　　　　　　content: ".";? ? ?<----內容為“.”就是一個英文的句號而已。也可以不寫。

? ? 　　　　　　　　　　　　　　　　　　display: block;? ?<----加入的這個元素轉換為塊級元素。

? ? 　　　　　　　　　　　　　　　　　　clear: both;? ? ?<----清除左右兩邊浮動。

? 　　　　　　　　　　　　　　　　　　? visibility: hidden;? ? ? <----可見度設為隱藏。注意它和display:none;是有區別的。仍然占據空間，只是看不到而已；

? 　　　　　　　　　　　　　　　　　　? height: 0;? ? ?<----高度為0；

? 　　　　　　　　　　　　　　　　　　? font-size:0;? ? <----字體大小為0；

　　　　　　　　　　　　　　　　　　　}

　　　　　　③'''給父元素添加after偽類

　　　　　　　　　　　　　　.clearfix::before,

　　　　　　　　　　　　　　.clearfix::after{

? ? 　　　　　　　　　　　　　　　　　　　　content: ".";display: block;?height: 0;overflow: hidden;

　　　　　　　　　　　　　　　　　　　　　}

　　　　　　　　　　　　　　　.clearfix:after{

? ? 　　　　　　　　　　　　　　　　　　　　　clear: both;

　　　　　　　　　　　　　　　　　　　　　　}

　　　　　　　　　　　　　　　　.clearfix {

? ? 　　　　　　　　　　　　　　　　　　　　zoom: 1; /* IE < 8 */

　　　　　　　　　　　　　　　　　　　　}

　　　　　　　　　④`````給外層div加.clearfix:after {visibility: hidden; 和display的區別 前者隱藏行列還占據空間? ?display: block; 必須寫??font-size: 0;

? 　　　　　　　　　　　　　　　　　　　　　　　　content: " "; 必須寫

? 　　　　　　　　　　　　　　　　　　　　　　　　clear: both; 必須寫

?　　　　　　　　　　　　　　　　　　　　　　　　 height: 0; 必須寫

　　　　　　　　　　　　　　　　　　　　　　　　}