css同级元素之间的清除浮动的技巧

2020-11-27 来源：我们爱旅游

清除左浮动:该元素的左边不允许出现浮动元素而当前它的左边有浮动元素,而自己本身又是块元素,只能掉到下一行首开始显示

clear: left;

清除右浮动:与上面相同,不允许元素的右边出现浮动元素,同样它只能在右浮动元素下面另起一行显示,当然,它也只能沿着右浮动的最下面的底边为起始点,开始显示

clear: right;

如果该元素的左右二边都禁止出现浮动元素,可以使用以下简写

clear:both;

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>6.同级元素之间的清除浮动的技巧</title>
<style type="text/css">
 .box1 {
 width:200px;
 height: 200px;
 background-color: lightskyblue;
 /*设置左浮动*/
 float:left;
 }
 .box2 {
 width:250px;
 height: 250px;
 background-color: lightgreen;
/*设置右浮动*/
 float:right;
 }
 .box3 {
 width:300px;
 height: 300px;
 background-color: lightcoral; /*珊瑚色*/
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
</html>

全部栏目

css同级元素之间的清除浮动的技巧