<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>浮動</title>
<style type="text/css">
.redDiv,.blueDiv,.greenDiv{
width: 300px;
height: 300px;
/*
1、使用float可以讓塊級元素同行顯示
2、float left讓元素從左往右排列，right讓元素從右往左排列
3、使用float 可以讓行級元素設置寬和高
4、float的元素，從左往右排，空間不夠就會換行
5、float left的時候，如果布局需要換行，換行的元素的位置和最后一個div的高度是一樣的
*/
float: right;
}
.redDiv{
background-color: red;
height: 350px;
}
.blueDiv{
background-color: blue;
height: 250px;
}
.greenDiv{
background-color: green;
height: 550px;
}
.span1,.span2{
float: right;
width: 100px;
height: 100px;
background-color: aquamarine;
}
.span2{
background-color: #8A2BE2;
}
</style>
</head>
<body>
<div class="redDiv">div1</div>
<div class="blueDiv">div2</div>
<div class="greenDiv">div3</div>
<span class="span1">span1</span>
<span class="span2">span2</span>
</body>
</html>
浮動
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。
- 文/潘曉璐 我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人，你說我怎么就攤上這事。” “怎么了？”我有些...
- 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著，像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上，一...
- 文/蒼蘭香墨 我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了？” 一聲冷哼從身側響起，我...
推薦閱讀更多精彩內容
- CSS布局技術的根本是3個基本概念：定位、浮動、外邊距操縱。 只需要設置希望定位的元素的寬度，然后將它們向左或向右...
