16-CSS基礎-清除浮動
16-CSS基礎-清除浮動
清除浮動
盒子高度問題
在標準流中內容的高度可以撐起盒子的高度
<style>
div{
background-color: red;
}
width: 200px;
height: 100px;
background-color: blue;
</style>
<div>
<p></p>
</div>
在浮動流中浮動元素內容的高不可以撐起盒子的高
<style>
div{
}
p{
float: left;
width: 200px;
height: 100px;
background-color: blue;
}
</style>
<div>
<p></p>
</div>
清除浮動方式一
給前面的父盒子新增高度
示例程式碼:
<style>
*{
margin: 0;
padding: 0;
}
.box1{
background-color: red;
/*這裡*/
height: 50px;
}
.box2{
background-color: purple;
}
ul{
list-style: none;
}
.ul01 li{
background-color: blue;
}
.ul02 li{
background-color: green;
}
ul li{
float: left;
}
</style>
<div class="box1">
<ul class="ul01">
<li>大娃</li>
<li>二娃</li>
<li>三娃</li>
</ul>
</div>
<div class="box2">
<ul class="ul02">
<li>李南江</li>
<li>極客江南</li>
<li>江哥</li>
</ul>
</div>
新增高度前:
新增高度後
注意點:
在企業開發中能不寫高度就不寫高度, 所以這種方式不常用
清除浮動方式二
利用clear:both;屬性清除前面浮動元素對我的影響
示例程式碼:
<style>
*{
margin: 0;
padding: 0;
}
.box1{
background-color: red;
}
.box2{
background-color: purple;
/*這裡*/
clear: both;
/*margin無效*/
margin-top: 30px;
}
ul{
list-style: none;
}
.ul01 li{
background-color: blue;
}
.ul02 li{
background-color: green;
}
ul li{
float: left;
}
</style>
<div class="box1">
<ul class="ul01">
<li>大娃</li>
<li>二娃</li>
<li>三娃</li>
</ul>
</div>
<div class="box2">
<ul class="ul02">
<li>李南江</li>
<li>極客江南</li>
<li>江哥</li>
</ul>
</div>
新增clear: both;前:
新增clear: both;後
注意點:
使用clear:both之後margin屬性會失效, 所以不常用
清除浮動方式三
在兩個有浮動子元素的盒子之間新增一個額外的塊級元素
示例程式碼:
<style>
*{
margin: 0;
padding: 0;
}
.box1{
background-color: red;
}
.box2{
background-color: purple;
}
ul{
list-style: none;
}
.ul01 li{
background-color: blue;
}
.ul02 li{
background-color: green;
}
ul li{
float: left;
}
/*這裡*/
.wall{
clear: both;
}
.h20{
/*利用額外塊級元素實現margin*/
height: 20px;
background-color: deepskyblue;
}
</style>
<div class="box1">
<ul class="ul01">
<li>大娃</li>
<li>二娃</li>
<li>三娃</li>
</ul>
</div>
<!--這裡-->
<div class="wall h20"></div>
<div class="box2">
<ul class="ul02">
<li>李南江</li>
<li>極客江南</li>
<li>江哥</li>
</ul>
</div>
新增額外塊級元素前
新增額外塊級元素後
注意點
在外牆法中可以通過設定額外標籤的高度來實現margin效果
搜狐中大量使用了這個技術, 但是由於需要新增大量無意義的標籤, 所以不常用
清除浮動方式四
在前面一個盒子的最後新增一個額外的塊級元素
示例程式碼
<style>
*{
margin: 0;
padding: 0;
}
.box1{
background-color: red;
}
.box2{
background-color: purple;
/*margin有效*/
margin-top: 20px;
}
ul{
list-style: none;
}
.ul01 li{
background-color: blue;
}
.ul02 li{
background-color: green;
}
ul li{
float: left;
}
/*這裡*/
.wall{
clear: both;
}
</style>
<div class="box1">
<ul class="ul01">
<li>大娃</li>
<li>二娃</li>
<li>三娃</li>
</ul>
<!--這裡-->
<div class="wall"></div>
</div>
<div class="box2">
<ul class="ul02">
<li>李南江</li>
<li>極客江南</li>
<li>江哥</li>
</ul>
</div>
新增額外塊級元素前
新增額外塊級元素後
注意點:
內牆法會自動撐起盒子的高度, 所以可以直接設定margin屬性
和內牆法一樣需要新增很多無意義的空標籤，有違結構與表現的分離，在後期維護中將是噩夢
清除浮動方式五
什麼是overflow:hidden?
overflow:hidden的作用是清除溢位盒子邊框外的內容
示例程式碼
.test{
width: 100px;
height: 100px;
border: 1px solid #000;
background-color: red;
overflow: hidden;
}
<div class="test">我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字</div>
新增overflow:hidden前
新增overflow:hidden後
如何利用overflow:hidden;清除浮動
給前面一個盒子新增overflow:hidden屬性
示例程式碼
<style>
*{
margin: 0;
padding: 0;
}
.box1{
background-color: red;
/*這裡*/
overflow: hidden;
*zoom:1;
}
.box2{
background-color: purple;
/*margin有效*/
margin-top: 20px;
}
ul{
list-style: none;
}
.ul01 li{
background-color: blue;
}
.ul02 li{
background-color: green;
}
ul li{
float: left;
}
</style>
<div class="box1">
<ul class="ul01">
<li>大娃</li>
<li>二娃</li>
<li>三娃</li>
</ul>
</div>
<div class="box2">
<ul class="ul02">
<li>李南江</li>
<li>極客江南</li>
<li>江哥</li>
</ul>
</div>
新增overflow:hidden;前
新增overflow:hidden;後
注意點:
由於overflow:hidden可以撐起盒子的高度, 所以可以直接設定margin屬性
IE8以前不支援利用overflow:hidden來清除浮動, 所以需要加上一個*zoom:1;
實際上*zoom:1能夠觸發IE8之前IE瀏覽器的hasLayout機制
優點可以不用新增額外的標籤又可以撐起父元素的高度, 缺點和定位結合在一起使用時會有衝突
*zoom:1;和_zoom:1的區別
這個是hack寫法，用來識別不同版本的IE瀏覽器
_後面的屬性只有IE6能識別
*後面的屬性 IE6 IE7能識別
清除浮動方式六
給前面的盒子新增偽元素來清除浮動
示例程式碼
<style>
*{
margin: 0;
padding: 0;
}
.box1{
background-color: red;
}
.box2{
background-color: purple;
/*margin有效*/
margin-top: 20px;
}
ul{
list-style: none;
}
.ul01 li{
background-color: blue;
}
.ul02 li{
background-color: green;
}
li{
float: left;
}
/*這裡*/
.clearfix:after {
/*生成內容作為最後一個元素*/
content: "";
/*使生成的元素以塊級元素顯示,佔滿剩餘空間*/
display: block;
/*避免生成內容破壞原有佈局的高度*/
height: 0;
/*使生成的內容不可見，並允許可能被生成內容蓋住的內容可以進行點選和互動*/
visibility: hidden;
/*重點是這一句*/
clear: both;
}
.clearfix {
/*用於相容IE, 觸發IE hasLayout*/
*zoom:1;
}
</style>
<div class="box1 clearfix">
<ul class="ul01">
<li>大娃</li>
<li>二娃</li>
<li>三娃</li>
</ul>
</div>
<div class="box2">
<ul class="ul02">
<li>李南江</li>
<li>極客江南</li>
<li>江哥</li>
</ul>
</div>
新增偽元素前
新增偽元素後
注意點:
本質上和內牆法一樣, 都是在前面一個盒子的最後新增一個額外的塊級元素
新增偽元素後可以撐起盒子的高度, 所以可以直接設定margin屬性
CSS中還有一個東西叫做偽類, 偽元素和偽類不是同一個東西
清除浮動方式七
給前面的盒子新增雙偽元素來清除浮動
示例程式碼
<style>
*{
margin: 0;
padding: 0;
}
.box1{
background-color: red;
}
.box2{
background-color: purple;
/*margin有效*/
margin-top: 20px;
}
ul{
list-style: none;
}
.ul01 li{
background-color: blue;
}
.ul02 li{
background-color: green;
}
li{
float: left;
}
/*這裡*/
.cf:before,.cf:after {
content:"";
display:table;
/*重點是這一句*/
clear:both;
}
.cf {
zoom:1;
}
</style>
<div class="box1 clearfix">
<ul class="ul01">
<li>大娃</li>
<li>二娃</li>
<li>三娃</li>
</ul>
</div>
<div class="box2">
<ul class="ul02">
<li>李南江</li>
<li>極客江南</li>
<li>江哥</li>
</ul>
</div>
新增雙偽元素前
新增雙偽元素後
注意點:
新增偽元素後可以撐起盒子的高度, 所以可以直接設定margin屬性
先知道有這些方式, 原理需要學習到BFC和hasLayout才能明白
支援BFC的瀏覽器（IE8+，firefox，chrome，safari）通過建立新的BFC閉合浮動；
不支援 BFC的瀏覽器 （IE5-7），通過觸發 hasLayout 閉合浮動。