<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
div{
font-size: 30px;
}
.box1{
width: 100px;
height: 100px;
background-color: pink;
float: left;
}
.box2{
width: 100px;
height: 100px;
background-color: purple;
}
</style>
</head>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
</body>
</html>
將box1設置浮動，由於box1的浮動，導致box3位置上移，也就是box3受到box1浮動的影響，位置發生了改變。
如果我們不希望某個元素因爲其他元素浮動的影響而改變位置，可以通過clear屬性來清除元素隊當前元素所產生的影響。
clear:
- 作用：清除浮動元素對當前元素所產生的影響。
- 可選值：
left：清除左側浮動元素對當前元素的影響。
right:清除右側浮動元素對當前元素的影響.
both：清除兩側中最大影響的一側。
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
div{
font-size: 30px;
}
.box1{
width: 100px;
height: 100px;
background-color: pink;
float: left;
}
.box2{
width: 200px;
height: 200px;
background-color: purple;
float: right;
}
.box3{
width: 100px;
height: 100px;
background-color: yellowgreen;
clear: both;
}
</style>
</head>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
</body>
</html>
可以看到塊3的位置受塊2的影響較大，故clear的是塊2的影響。其實原理就是瀏覽器自動將塊3的外邊距調爲200px。
- 原理：
設置清除浮動以後，瀏覽器會自動爲元素添加一個外邊距，以使其位置不受其他元素的影響。
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
div{
font-size: 30px;
}
.box1{
width: 100px;
height: 100px;
background-color: pink;
float: left;
}
.box2{
width: 100px;
height: 100px;
background-color: purple;
clear: left;
}
</style>
</head>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
</body>
</html>
我們可以用after和clear結合來解決高度塌陷問題：
需求：box1包住浮動的box2。
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.box1{
border:10px red solid;
}
.box2{
width: 100px;
height: 100px;
background-color: #bfa;
float: left;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
step1：可以看到上圖，box1無法包住浮動的box2。因此我們需要有一個東西把box1的框撐起了。於是爲這個需求增加一個box3，不給它設置內容，給它一個hight：100px,目前看是撐起來了，但是一旦我們改變box2的高度，box2就會出框，所以該方法也不行。
step2:既然學到了clear，就可以用到clear。我們還是爲需求添加一個box3，內容“hello”。
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.box1{
border:10px red solid;
}
.box2{
width: 100px;
height: 200px;
background-color: #bfa;
float: left;
}
.box3{
/*通過box3將box1撐起了，解決高度塌陷問題。*/
clear: both;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
<div class="box3">hello</div>
</div>
</body>
</html>
step3:可以看到添加的box3確實可以解決高度塌陷的問題，但是我們添加的box3改變了網頁佈局的結構，而高度塌陷屬於頁面顯示部分。HTML負責結構，CSS負責樣式，兩者應該各司其職。所以利用結構來解決樣式的問題不是最好的。高度塌陷應該要交給CSS纔對。
step4:如果用css來解決高度塌陷問題，我們可以參考step3的原理，加個元素將框撐起了。利用after可以實現。
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.box1{
border:10px red solid;
}
.box2{
width: 100px;
height: 200px;
background-color: #bfa;
float: left;
}
.box1::after{
content: " ";
clear: both;
/*after是行內元素，不獨佔一行，因此還要將其變成塊元素*/
display: block;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
clearfix：
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.box1{
width: 200px;
height: 200px;
background-color: pink;
}
.box2{
width: 100px;
height: 100px;
background-color: #bfa;
margin-top: 100px;
}
.box1::before{
content: '';
display: table;
}
/*clear這個樣式可以解決高度和外邊距重疊的問題。遇到這些問題，可以直接使用clear這個類。*/
.clearfix::before,.clear ::{
content: "";
display: table;/**/表格
clear: both;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
