清除浮動：根據情況需要來清楚浮動 。清除浮動的目的： 就是爲了解決 父 盒子高度爲0 的問題。
1.、額外標籤法 給浮動盒子的後面添加一個新的div
2、overflow:hidden 觸發了bfc模式，就不用清除浮動了 bfc模式。
CSS2.1中規定滿足下列CSS聲明之一的元素便會生成BFC：
- 根元素
- float的值不爲none
- overflow的值不爲visible
- display的值爲inline-block、table-cell、table-caption
- position的值爲absolute或fixed
3、僞元素 網易搜狐常用
.clearfix:after{
content:””;
visibility:hidden;
display:block;
height:0;
clear:both;
}
.clearfix{ //IE6模式下
zoom:1;
}
清除浮動： 真正的叫法 閉合浮動
4、 雙僞元素 小米，淘寶常用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.father {
width: 600px;
height: auto;
border: 1px solid red;
}
.child1,.child2 {
background: pink;
width: 250px;
height: 250px;
float: left;
}
.clearfix:before,.clearfix:after {
/真正意義上的閉合浮動/ display: table;
content: "";
}
.clearfix:after {
clear: both;
}
.clearfix {
//IE6
zoom: 1;
}
</style>
</head>
<body>
<div>
<div>哥哥</div>
<div>妹妹</div>
</div>
</body>
</html>
自己是一個6年的前端工程師,希望本文對你有幫助！
這裏推薦一下我的前端學習交流扣qun：731771211 ，裏面都是學習前端的，如果你想製作酷炫的網頁，想學習編程。自己整理了一份2019最全面前端學習資料，從最基礎的HTML+CSS+JS【炫酷特效，遊戲，插件封裝，設計模式】到移動端HTML5的項目實戰的學習資料都有整理，送給每一位前端小夥伴，每天分享技術
點擊：加入