css同級元素之間的清除浮動的技巧
- 无忌哥哥原創
- 2018-06-29 09:21:552248瀏覽
清除左浮動:該元素的左邊不允許出現浮動元素而當前它的左邊有浮動元素,而自己本身又是塊元素,只能掉到下一行首開始顯示
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同級元素之間的清除浮動的技巧的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn