[Web 前端] 018 css 清除浮動的四種方法
阿新 • • 發佈：2019-05-03
清除 效果 塊級元素 display styles 思路 gree float sta
清除浮動的四種方法
- 加 clear: ...（見例1）
- 父級上增加屬性 overflow：hidden（見例2.1）
- 在最後一個子元素的後面加一個空的 div，給它一個樣式屬性 clear: both（不推薦）（見例2.2）
- 使用成熟的清浮動樣式類 clearfix（見例3）
少廢話，上例子
例 1
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>test</title> <link rel="stylesheet" type="text/css" href="./static/CSS/test.css"> </head> <body> <div class="box1">box1</div> <div class="box2">box2</div> <div class="box3">box3</div> <div class="box4">box4</div> <div class="box5">box5</div> <div class="box6">box6</div> </body> </html>
div{ width: 100px; height: 100px; float: left; } .box1{ background: red; } .box2{ background: orange; } .box3{ background: yellow; } .box4{ background: green; /* 清除浮動 left: 清除左浮動 right: 清除有浮動 both: 清除左右兩邊的浮動 */ /*clear: left; 只加上這句，效果見效果截圖 2*/ /*clear: rightt; 只加上這句，顯示上沒有變化 */ } .box5{ background: blue; } .box6{ background: indigo; } .box7{ background: purple; }
- 效果截圖 1
- 縮小瀏覽器的寬度後的截圖
- 效果截圖 2
例 2
<!-- 例2 --> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>test</title> <link rel="stylesheet" type="text/css" href="./static/CSS/test.css"> </head> <body> <div class="wrap"> <div class="box1">box1</div> <div class="box2">box2</div> <div class="box3">box3</div> <div class="box4">box4</div> <div class="box5">box5</div> <div class="box6">box6</div> <div class="box7">box7</div> </div> </body> </html>
<!-- 例2.1 -->
.wrap{
border: 2px solid;
/* 清除浮動
解決父級元素高度無法撐開問題
註意: 是給浮動元素的父級添加 */
/*overflow: hidden; 加上這句，見效果截圖 4 */
}
.box1, .box2, .box3, .box4, .box5, .box6, .box7{
width: 100px;
height: 100px;
float: left;
}
.box1{
background: red;
}
.box2{
background: orange;
}
.box3{
background: yellow;
}
.box4{
background: green;
clear: left;
}
.box5{
background: blue;
}
.box6{
background: indigo;
}
.box7{
background: purple;
}- 效果截圖 3
- 效果截圖 4
<!-- 例2.2 html 不變 -->
.wrap{
border: 2px solid;
}
.wrap:after{ /* 偽類選擇器 */
/* 也有 before，但一般使用 after
這種方法的思路：
1. 在父級元素後插入一個空的字符串
2. 將這個字符串轉成塊級元素
3. 用 clear: both 給此元素清除浮動
4. 沒有添加不必要的標簽，不影響頁面結構
註意：給浮動元素的父級添加 */
content: '';
display: table;
/* display: block; 從效果上看，block 與 table 一致 */
clear: both;
}
.box1, .box2, .box3, .box4, .box5, .box6, .box7{
width: 100px;
height: 100px;
float: left;
}
.box1{
background: red;
}
.box2{
background: orange;
}
.box3{
background: yellow;
}
.box4{
background: green;
clear: left;
}
.box5{
background: blue;
}
.box6{
background: indigo;
}
.box7{
background: purple;
}- 效果截圖 5
- 與效果截圖 4 一般無二，故略
例 3
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<link rel="stylesheet" type="text/css" href="./static/CSS/test.css">
</head>
<body>
<div class="wrap">
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>
<div class="box4">box4</div>
<div class="box5">box5</div>
<div class="box6">box6</div>
<div class="box7">box7</div>
<div class="cl"></div> <!-- 多了這句 -->
</div>
</body>
</html>.wrap{
border: 2px solid;
}
.cl{ /* 可行，但不推薦，因為會對頁面結構產生影響 */
clear: both;
}
.box1, .box2, .box3, .box4, .box5, .box6, .box7{
width: 100px;
height: 100px;
float: left;
}
.box1{
background: red;
}
.box2{
background: orange;
}
.box3{
background: yellow;
}
.box4{
background: green;
clear: left;
}
.box5{
background: blue;
}
.box6{
background: indigo;
}
.box7{
background: purple;
}- 效果截圖 6
- 與效果截圖 4 一般無二，故略
補充
- 有時會加一句
zoom:1;，這樣做是為了兼容 IE
參考：北京圖靈學院的 Web 前端公開課
[Web 前端] 018 css 清除浮動的四種方法