【CSS】HTML中如何清理浮動
阿新 • • 發佈：2018-11-25
首先我們看下沒有浮動的樣式：
html程式碼：
<div id="div1">
<div id="blue"></div>
<div id="pink"></div>
</div>css程式碼：
#div1 { background:purple; } #blue { width:200px; height:100px; background:blue; } #pink { width:250px; height:150px; background:pink; }
效果圖：
現在我們給左下角的粉色div新增一個向左的浮動（float:left)
現在的#right程式碼變成了下面這樣的。
#pink {
width:250px;
height:150px;
background:pink;
float:left;
}效果圖如下：
發現紫色的div全部跑到了粉色的上面，高度和藍色div一樣。
現在再給藍色div新增一個向左的浮動（float:left）。
#blue { width:200px; height:100px; background:blue; float:left; }
效果圖如下：
發現紫色的div消失了，而粉色的div和藍色div並排在一起了。
所以說在元素進行了浮動後預設是出現在同一行，而且浮動元素的位置是到父級的邊界或者是遇到另外一個浮動元素才會停止。
那麼如果不想紫色div消失，那麼就需要消除浮動，方法如下：
方法一：給父元素以高度和寬度。
#div1 {
background:purple;
width:500px;
height:250px;
}效果圖如下：
方法二：父級元素加上overflow：hidden
如果不想給紫色div固定的寬高，想讓它的內容將它撐開。那麼我們就可以在父級元素上也就是紫色div的css中加上overflow：hidden。從而讓紫色div顯示出來了。
#div1 {
background:purple;
overflow:hidden;
}效果圖如下：
方法三：給兄弟元素加一個clear：both
html程式碼：
<div id="div1">
<div id="blue"></div>
<div id="pink"></div>
<div id="div2"></div>
</div>css程式碼：
#div2 {
clear:both;
}全部程式碼：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#div1 {
background:purple;
}
#blue {
width:200px;
height:100px;
background:blue;
float:left;
}
#pink {
width:250px;
height:150px;
background:pink;
float:left;
}
#div2 {
clear:both;
}
</style>
</head>
<body>
<div id="div1">
<div id="blue"></div>
<div id="pink"></div>
<div id="div2"></div>
</div>
</body>
</html>除了對父級進行改變，我們也可以對子元素的兄弟元素進行改動，從而達到去除浮動的效果。
效果圖如下：
方法四：利用偽類去除浮動
html程式碼:
<div class="div_class">
<div id="blue"></div>
<div id="pink"></div>
</div>css程式碼：
.div_class {
background:purple;
}
.div_class:after {
content:"";
clear: both;
display: block; <!--可以是block，也可以使用table或者list-item也可以，但是需要去掉專案符號。-->
}全部程式碼：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.div_class {
background:purple;
}
.div_class:after {
content:"";
clear: both;
display: block; <!--可以是block，也可以使用table或者list-item也可以，但是需要去掉專案符號。-->
}
#blue {
width:200px;
height:100px;
background:blue;
float:left;
}
#pink {
width:250px;
height:150px;
background:pink;
float:left;
}
</style>
</head>
<body>
<div class="div_class">
<div id="blue"></div>
<div id="pink"></div>
</div>
</body>
</html>效果圖如下：
