元素的clear屬性:
box1向左浮動,脫離文檔流(不再占用位置),box2将自動向上移動,位置發生了改變
如果不想讓下邊的元素的位置發生改變
為了解決這個問題:可以設定元素的clear屬性:
清除浮動元素對目前元素的位置的影響
clear:
作用:清除浮動元素對目前元素的影響
可選值；
left:清除左側浮動元素對目前元素的影響
right:清除右側浮動元素對目前元素的影響
both:清除左/右兩側浮動元素對目前元素的影響
原理:設定了clear屬性後,浏覽器會自動為目前元素(塊元素)添加上外邊距
以使目前元素不再發生移動
Demo:
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>clear屬性</title>
<style>
.box1{
width:200px;
height:200px;
background-color: cadetblue;
/* 設定向左浮動*/
float: left;
}
.box2{
width:400px;
height:400px;
background-color:crimson;
float: right;
}
.box3{
width:200px;
height:200px;
background-color:chartreuse;
/*設定clear屬性:使其位置不受左側浮動元素的影響 */
/* clear: left; */
/*設定clear屬性:使其位置不受右側浮動元素的影響 */
/* clear: right; */
/* clear: both; */
}
</style>
</head>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
</body>
</html>
![CSS的僞類與僞元素的差別[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)