為什麼要清除浮動？
清除浮動主要是為了解決，父元素因為子級元素浮動引起的内部高度為0的問題
清除浮動的方法（最常用的4種）
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<!-- <style type="text/css">
@import url(./common.css);
</style> -->
<link rel="stylesheet" href="./common.css" target="_blank" rel="external nofollow" >
<body>
<div class="father clearfix">
<div class="son1">
</div>
<div class="son2">
</div>
<div class="son3">
</div>
</div>
</body>
</html>
- 給父元素加overflow: hidden 或 display：table清除浮動
.father {
background-color: #000;
/* 1.給父元素加overflowhidden */
/* overflow: hidden; */
}
- 使用afer微元素清除浮動
/* 2 使用after微元素清除浮動 */
.clearfix::after {
content: '';
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
zoom: 1;
}
- 使用雙微元素清除浮動
.clearfix::before,.clearfix::after{
height: 0;
content: '';
display: table;
}
.clearfix::after{
clear: both;
}
.clearfix {
zoom: 1;
}
-
額外标簽法
在最後一個浮動元素後添加一個div 然後清除左右的浮動 */
.father .son3 {
clear: both;
}
原理：https://blog.csdn.net/u012207345/article/details/78279961
![html+css像素塊圖檔（遊戲搖桿）[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)