浮動：讓多個塊元素可以在一行顯示 讓多個div放一行
問題：浮動是脫標的，因此會影響別的盒子 ,不在保留原來位置，
清除浮動的本質： 解決父級元素內高為0的問題（子級浮動后），讓父級占位子，
相對于定位，在應用的時候，子絕父相，父級元素保留位置，故雖同脫標但無上述問題
清除浮動的方法：
1. 額外標簽法：最后一個浮動標簽后，加空盒子
1 <div ></div> <!-- 最后一個浮動標簽后，新添加一個標簽 清除浮動 -->
2. 給父級加overflow:hidden屬性
1 .father {
2 border: 1px solid red;
3 width: 300px;
4 overflow: hidden; /*別加錯位置了，給父親加*/
5 /*不是所有的浮動我們都需要清除 ，誰影響布局，我們清除誰*/
6 }
3. 用after偽元素 clearfix:after
.clearfix:after { /*正常瀏覽器 清除浮動*/
content:"";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
*zoom: 1; /*zoom 1 就是ie6 清除浮動方式 * ie7一下的版本所識別*/
}
4. 用after和before 雙偽元素 clearfix:after clearfix:before
.clearfix:before, .clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/14473.html
標籤：其他
下一篇：SVG 屬性學習