清除浮動的幾種方式及其原理
首先:為什麼要清除浮動?
清除浮動主要是為了解決,父元素因為子級元素浮動引起的內部高度為0造成塌陷的問題。
(1)父級div定義 height
原理:父級div手動定義height,就解決了父級div無法自動獲取到高度的問題。
優點:簡單、代碼少、容易掌握
缺點:只適合高度固定的布局,要給出精確的高度,如果高度和父級div不一樣時,會產生問題
(2)父級div定義 overflow:hidden/auto
原理:必須定義width或zoom:1,同時不能定義height,使用overflow:hidden/auto時,瀏覽器會自動檢查浮動區域的高度
優點:簡單、代碼少、瀏覽器支持好;
缺點:overflow:hidde內容增多的時候容易造成不會自動換行導致內容被隱藏掉,無法顯示要溢出的元素;overflow:auto內容增多可能出現滾動條(不推薦使用);
<style> .father { width: 400px; overflow: hidden; } .big { width: 200px; height: 200px; float: left; background-color: aqua; } .small { width: 100px; height: 100px; float: left; background-color: #ccc; } </style> <div class="father"> <div class="big"></div> <div class="small"></div> </div>
(3)結尾處加空div標籤 clear:both
原理:添加一個空div,利用css提供的clear:both清除浮動,讓父級div自動檢測子盒子最高的高度,然後與其同高(本質就是閉合浮動,就是讓父盒子閉合出口和入口,不讓子盒子出來)。
優點:簡單、代碼少、瀏覽器支持好、不容易出現怪問題
缺點:不少初學者不理解原理;如果頁面浮動布局多,就要增加很多空div,讓人感覺很不好(添加無意義標籤,語義化差,所以不建議使用。)。
<style> .father { width: 400px; } .big { width: 200px; height: 200px; float: left; background-color: aqua; } .small { width: 100px; height: 100px; float: left; background-color: #ccc; } .clear { clear: both; } </style> <div class="father"> <div class="big"></div> <div class="small"></div> <div class="clear"></div> </div>
(4)偽類元素:after清除浮動(推薦使用)
原理:其本質與添加空div標籤是一樣的,都是添加一個不可見但佔位置的塊級元素,然後清除掉所有的浮動;
優點:符合閉合浮動思想,結構語義化正確
<style> .father { width: 400px; } .big { width: 200px; height: 200px; float: left; background-color: aqua; } .small { width: 100px; height: 100px; float: left; background-color: #ccc; } /* 使用偽類元素清除浮動:偽元素是行內元素 正常瀏覽器清除浮動方法 */ .clearFix::after { content:""; display: block; height: 0; visibility: hidden; clear: both; } /* ie6清除浮動的方式 *號只有IE6-IE7執行,其他瀏覽器不執行 */ .clearFix { zoom: 1; } </style> <div class="father clearFix"> <div class="big"></div> <div class="small"></div> <!-- <div class="clear"></div> --> </div>
(5)雙偽類元素:after和:before清除浮動(推薦使用)
原理與單偽元素清除浮動一樣;
<style> .father { width: 400px; } .big { width: 200px; height: 200px; float: left; background-color: aqua; } .small { width: 100px; height: 100px; float: left; background-color: #ccc; } /* 使用:after和:before雙偽元素清除浮動 */ .clearFix::after,.clearFix::before { content: ""; display: table; } .clearFix::after { clear: both; } .clearFix { *zoom: 1; } </style> <div class="father clearFix"> <div class="big"></div> <div class="small"></div> <!-- <div class="clear"></div> --> </div>
效果展示:
清除浮動前:
清除浮動後:
首先:為什麼要清除浮動?
清除浮動主要是為了解決,父元素因為子級元素浮動引起的內部高度為0造成塌陷的問題。
(1)父級div定義 height
原理:父級div手動定義height,就解決了父級div無法自動獲取到高度的問題。
優點:簡單、代碼少、容易掌握
缺點:只適合高度固定的布局,要給出精確的高度,如果高度和父級div不一樣時,會產生問題
(2)父級div定義 overflow:hidden/auto
原理:必須定義width或zoom:1,同時不能定義height,使用overflow:hidden/auto時,瀏覽器會自動檢查浮動區域的高度
優點:簡單、代碼少、瀏覽器支持好;
缺點:overflow:hidde內容增多的時候容易造成不會自動換行導致內容被隱藏掉,無法顯示要溢出的元素;overflow:auto內容增多可能出現滾動條(不推薦使用);
<style>
.father {
width: 400px;
overflow: hidden;
}
.big {
width: 200px;
height: 200px;
float: left;
background-color: aqua;
}
.small {
width: 100px;
height: 100px;
float: left;
background-color: #ccc;
}
</style>
<div class=“father”>
<div class=“big”></div>
<div class=“small”></div>
</div>
(3)結尾處加空div標籤 clear:both
原理:添加一個空div,利用css提供的clear:both清除浮動,讓父級div自動檢測子盒子最高的高度,然後與其同高(本質就是閉合浮動,就是讓父盒子閉合出口和入口,不讓子盒子出來)。
優點:簡單、代碼少、瀏覽器支持好、不容易出現怪問題
缺點:不少初學者不理解原理;如果頁面浮動布局多,就要增加很多空div,讓人感覺很不好(添加無意義標籤,語義化差,所以不建議使用。)。
<style>
.father {
width: 400px;
}
.big {
width: 200px;
height: 200px;
float: left;
background-color: aqua;
}
.small {
width: 100px;
height: 100px;
float: left;
background-color: #ccc;
}
.clear {
clear: both;
}
</style>
<div class=“father”>
<div class=“big”></div>
<div class=“small”></div>
<div class=“clear”></div>
</div>
(4)偽類元素:after清除浮動(推薦使用)
原理:其本質與添加空div標籤是一樣的,都是添加一個不可見但佔位置的塊級元素,然後清除掉所有的浮動;
優點:符合閉合浮動思想,結構語義化正確
<style>
.father {
width: 400px;
}
.big {
width: 200px;
height: 200px;
float: left;
background-color: aqua;
}
.small {
width: 100px;
height: 100px;
float: left;
background-color: #ccc;
}
/* 使用偽類元素清除浮動:偽元素是行內元素 正常瀏覽器清除浮動方法 */
.clearFix::after {
content:“”;
display: block;
height: 0;
visibility: hidden;
clear: both;
}
/* ie6清除浮動的方式 *號只有IE6-IE7執行,其他瀏覽器不執行 */
.clearFix {
zoom: 1;
}
</style>
<div class=“father clearFix”>
<div class=“big”></div>
<div class=“small”></div>
<!– <div class=”clear”></div> –>
</div>
(5)雙偽類元素:after和:before清除浮動(推薦使用)
原理與單偽元素清除浮動一樣;
<style>
.father {
width: 400px;
}
.big {
width: 200px;
height: 200px;
float: left;
background-color: aqua;
}
.small {
width: 100px;
height: 100px;
float: left;
background-color: #ccc;
}
/* 使用:after和:before雙偽元素清除浮動 */
.clearFix::after,.clearFix::before {
content: “”;
display: table;
}
.clearFix::after {
clear: both;
}
.clearFix {
*zoom: 1;
}
</style>
<div class=“father clearFix”>
<div class=“big”></div>
<div class=“small”></div>
<!– <div class=”clear”></div> –>
</div>
效果展示:
清除浮動前:
清除浮動後: