清除浮動
盒子高度問題
在標準流中內容的高度可以撐起盒子的高度
<style>
div{
background-color: red;
}
p{
width: 200px;
height: 100px;
background-color: blue;
}
</style>
<div>
<p></p>
</div>在浮動流中浮動元素內容的高不可以撐起盒子的高
<style>
div{
background-color: red;
}
p{
float: left;
width: 200px;
height: 100px;
background-color: blue;
}
</style>
<div>
<p></p>
</div>清除浮動方式一
給前面的父盒子添加高度
示例代碼:
```html<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">
大娃
二娃
三娃
</ul>
</div>
<div class="box2">
<ul class="ul02">
李南江
極客江南
江哥
</ul>
</div>
- 添加高度前:
- 
- 添加高度後
- 
- 注意點:
- 在企業開發中能不寫高度就不寫高度, 所以這種方式`不常用`
###清除浮動方式二
- 利用clear:both;屬性清除前面浮動元素對我的影響
- 示例代碼:html<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">
大娃
二娃
三娃
</ul>
</div>
<div class="box2">
<ul class="ul02">
李南江
極客江南
江哥
</ul>
</div>
- 添加clear: both;前:
- 
- 添加clear: both;後
- 
- 注意點:
- 使用clear:both之後margin屬性會失效, 所以`不常用`
###清除浮動方式三
- 在兩個有浮動子元素的盒子之間添加一個額外的塊級元素
- 示例代碼:html<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">
大娃
二娃
三娃
</ul>
</div>
<!--這裏-->
<div class="wall h20"></div>
<div class="box2">
<ul class="ul02">
極客江南
江哥
</ul>
</div>
- 添加額外塊級元素前
- 
- 添加額外塊級元素後
- 
- 注意點
- 在外牆法中可以通過設置額外標籤的高度來實現margin效果
- 搜狐中大量使用了這個技術, 但是由於需要添加大量無意義的標籤, 所以`不常用`
###清除浮動方式四
- 在前面一個盒子的最後添加一個額外的塊級元素
- 示例代碼html<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">
大娃
二娃
三娃
</ul>
<!--這裏-->
<div class="wall"></div>
</div>
<div class="box2">
<ul class="ul02">
極客江南
江哥
</ul>
</div>
- 添加額外塊級元素前
- 
- 添加額外塊級元素後
- 
- 注意點:
- 內牆法會自動撐起盒子的高度, 所以可以直接設置margin屬性
- 和內牆法一樣需要添加很多無意義的空標籤，有違結構與表現的分離，在後期維護中將是噩夢
###清除浮動方式五
- 什麼是overflow:hidden?
- overflow:hidden的作用是清除溢出盒子邊框外的內容
- 示例代碼
```html
.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屬性
示例代碼
```html<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">
二娃
三娃
</ul>
</div>
<div class="box2">
<ul class="ul02">
極客江南
江哥
</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能識別
###清除浮動方式六
- 給前面的盒子添加僞元素來清除浮動
- 示例代碼
```html
<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 閉合浮動。