整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
、為什么要清除浮動？
是為了解決 父元素因為子元素浮動而引起的內部高度為0的問題。
布局：
<body>
<div class="father">
<div class="big">盒子1</div>
<div class="small">盒子2</div>
大盒子
</div>
</body>
樣式：
<style>
.father{
border: 1px solid darkred;
width: 400px;
}
.big{
width: 100px; height: 100px;
background-color: orangered;
}
.small{
width: 50px; height: 50px;
background-color: mediumpurple;
}
</style>
盒子1和2都設置浮動后
.big, .small{
float: left;
}
我自己是一名從事了多年開發的web前端老程序員，目前辭職在做自己的web前端私人定制課程，今年年初我花了一個月整理了一份最適合2019年學習的web前端學習干貨，各種框架都有整理，送給每一位前端小伙伴，想要獲取的可以關注我的頭條號并在后臺私信我：前端，即可免費獲取。
二、解決方法
1.額外標簽法
在最后一個浮動標簽后，新加一個標簽，給其設置clear：both；
<div class="fahter">
<div class="big">big</div>
<div class="small">small</div>
<div class="clear">額外標簽法</div>
</div>
// css：
.clear{
clear:both;
}
優點：通俗易懂，方便
缺點：添加無意義標簽，語義化差。不推薦使用！
2.父元素添加overflow屬性
通過觸發BFC方式，實現清除浮動。
.father{
border: 1px solid darkred;
width: 400px;
overflow: hidden;
}
優點：代碼簡潔
缺點：內容增多的時候容易造成不會自動換行導致內容被隱藏掉，無法顯示要溢出的元素，不推薦使用！
3.使用after偽元素清除浮動（推薦使用）
// 先給父元素增加一個類名 clearfix ，然后在樣式中添加如下內容
.clearfix:after{
display: block;
content: '';
clear: both;
visibility:hidden; // 允許瀏覽器渲染，但不顯示出來，這樣才能實現清除浮動。
}
.clearfix{
*zoom: 1;/*ie6清除浮動的方式， *號只有IE6-IE7執行，其他瀏覽器不執行*/
}
優點：符合閉合浮動思想，結構語義化正確
缺點：ie6-7不支持偽元素 :after，使用zoom:1觸發hasLayout。
4.使用before和after雙偽元素清除浮動
.clearfix:after, .clearfix:before{
content: "";
display: block;
}
.clearfix:after{
clear: both;
}
.clearfix{
*zoom: 1;
}
優點：代碼更簡潔
缺點：用zoom:1觸發hasLayout。
原文鏈接：https://blog.csdn.net/weixin_40141473/article/details/97828990
除浮動，新手朋友往往不是很明白。如果不清除浮動對float進行閉合，在FF中往往會出錯，網上是有很多文章講過，我們先用一個非常簡潔易用實例開始吧！
給需要閉合的DIV（class為clearfix）加上如下的CSS樣式即可：
.clearfix:after{content:”.”;display:block;height:0;clear:both;visibility:hidden;}
*html .clearfix{height:1%;}
*+html .clearfix{height:1%;}
.clearfix{display:inline-block;}
.clearfix {display:block;}
不過貌似這樣有點麻煩，呵呵，大前端常用的是下面的：
.clear{clear:both;height:0px;overflow:hidden;}
上述兩種浮動閉合的辦法CSS清除浮動 萬能float閉合，但是很多同學都在使用下面的骨灰級解決辦法，這里也把他羅列出來：
.clear{clear:both;height:0;overflow:hidden;}
上述辦法是在需要清除浮動的地方加個div.clear或者br.clear，我們知道這樣能解決基本清浮動問題。
但是這種方法的最大缺陷就是改變了html結構，雖然只是加個div。
最優浮動閉合方案（這是我們推薦的）：
.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden
}
.clearfix {
*+height:1%;
}
用法很簡單，在浮動元素的父云素上添加class=”demo clearfix”。
你會發現這個辦法也有個弊端，但的確是小問題。改變css寫法就ok了：
.demo:after,.demo2:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden
}
.demo,.demo2 {
*+height:1%;
}
以上寫法就避免了改變html結構，直接用css解決了。
很拉轟的浮動閉合辦法：
.clearfix {
overflow:auto;
_height:1%;
}
測試了，百試不爽，真的很簡單，很給力。喜歡的同學也可以試試這個辦法。
另外下方面方法，測試通過：
.clearfix {
overflow:hidden;
_zoom:1;
}
文/丁向明
加我qq/微信交流：6135833，做一個有博客的web前端自媒體人
http://dingxiangming.com
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
