浮動
1. 浮動的簡介
通過浮動可以使一個元素向其父元素的左側或右側移動
使用float屬性來設置於元素的浮動
none默認值，元素不浮動left元素向左浮動right元素向右浮動
注意
- 元素設置浮動以后，水平布局的等式便不需要強制成立
- 元素設置浮動以后，會完全從文檔流中脫離，不再占用文檔流的位置，所以元素下邊的還在文檔流中的元素會自動向上移動
2. 浮動的特點
-
浮動元素會完全脫離文檔流，不再占據文檔流中的位置
-
設置浮動以后，元素會向父元素的左側或右側移動
-
浮動元素默認不會從父元素中移出
<style> .box1 { width: 100px; height: 100px; background-color: orange; float: left; } .box2 { width: 200px; height: 200px; background-color: red; } </style> <div class="box1"></div> <div class="box2"></div>
-
浮動元素向左或向右移動時，不會超過前邊的浮動元素（先來后到的順序）
<style> .box1 { width: 200px; height: 200px; background-color: orange; float: left; } .box2 { width: 200px; height: 200px; background-color: red; float: left; } .box3 { width: 200px; height: 200px; background-color: yellow; float: left; } </style> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div>
-
浮動元素不會超過上邊的浮動的兄弟元素，最多就是和它一樣高
<style> .box1 { width: 300px; height: 300px; background-color: orange; float: left; } .box2 { width: 400px; height: 400px; background-color: red; float: left; } .box3 { width: 300px; height: 300px; background-color: yellow; float: right; } </style> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div>
-
如果浮動元素的上邊是一個沒有浮動的塊元素，則浮動元素無法上移
<style> .box1 { width: 200px; height: 200px; background-color: orange; } .box2 { width: 200px; height: 200px; background-color: red; float: left; } </style> <div class="box1"></div> <div class="box2"></div>
-
浮動元素不會蓋住文字，文字會自動環繞在浮動元素的周圍，所以我們可以利用浮動來設置文字環繞圖片的效果
簡單總結：
- 浮動目前來講它的主要作用就是讓頁面中的元素可以水平排列，通過浮動可以制作一些水平方向的布局
- 元素設置浮動以后，將會從文檔流中脫離，從文檔流中脫離后，元素的一些特點也會發生變化
3. 脫離文檔流的特點
塊元素：
- 塊元素不再獨占頁面的一行
- 脫離文檔流以后，塊元素的寬度和高度默認都被內容撐開
<style>
.box1 {
background-color: orange;
/* float: left; */
}
</style>
<div class="box1">hello</div>
行內元素：
- 行內元素脫離文檔流以后會，特點和塊元素一樣
<style>
span {
width: 200px;
height: 200px;
background-color: orange;
float: left;
}
</style>
<span>I am a Span</span>
脫離文檔流之后的特點很像行內塊元素，不過存在一些差異
<style>
span {
width: 200px;
height: 200px;
background-color: orange;
/* display: inline-block; */
float: left;
}
</style>
<span>I am a Span</span>
<span>I am a Span</span>
4. 簡單布局
整體樣式
目的
- 熟悉布局（塊元素、浮動）
- 公共 css 部分復用
- 復習語義標簽
代碼
html 代碼
<!-- 頁眉 -->
<header></header>
<!-- 主體 -->
<main>
<!-- 左邊欄 -->
<nav></nav>
<!-- 中心 -->
<article>
<!-- 內容上 -->
<div class="top"></div>
<!-- 內容下 -->
<div class="bottom">
<!-- 內容左 -->
<div class="left"></div>
<!-- 內容中 -->
<div class="middle"></div>
<!-- 內容右 -->
<div class="right"></div>
</div>
</article>
<!-- 右邊欄 -->
<aside></aside>
</main>
<!-- 頁腳 -->
<footer></footer>
css 代碼
/* 公共部分 */
header,
main,
footer {
width: 1000px;
margin: 10px auto;
}
main nav,
main article,
main aside {
float: left;
/* 雖然設置浮動了，但整體大小是被內容撐開的，所以設置一個高度 */
height: 100%;
}
.bottom .left,
.bottom .middle,
.bottom .right {
float: left;
width: 220px;
height: 100%;
}
/* ==========整體布局-上========== */
header {
height: 100px;
background-color: silver;
}
/* ==========整體布局-中========== */
main {
height: 400px;
background-color: #bfa;
}
/* ------左邊欄------ */
main nav {
width: 150px;
background-color: red;
}
/* ------中心------ */
main article {
width: 680px;
background-color: green;
margin: 0 10px;
}
/* ---上--- */
article .top {
height: 190px;
background-color: yellow;
margin-bottom: 10px;
}
/* ---下--- */
article .bottom {
height: 200px;
background-color: orange;
}
/* 左 */
.bottom .left {
background-color: lightblue;
}
/* 中 */
.bottom .middle {
background-color: gray;
margin: 0 10px;
}
/* 右 */
.bottom .right {
background-color: wheat;
}
/* ------右邊欄------ */
main aside {
width: 150px;
background-color: blue;
}
/* ==========整體布局-下========== */
footer {
height: 100px;
background-color: tomato;
}
效果
5. 練習：w3school 導航條
去除默認樣式，引入 reset.css
<link rel="stylesheet" href="css/reset.css" />
css 樣式
/* 去除默認樣式 */
a {
text-decoration: none;
}
/* ul整體布局 */
.menu {
width: 1211px;
height: 48px;
background-color: #e8e7e3;
margin: 100px auto;
}
/* li整體布局 */
.nav {
/* 浮動li元素 */
float: left;
width: 173px;
line-height: 48px;
}
.nav a {
/* 注意點：升級為塊元素，使之繼承父類寬高
否則鼠標懸浮在li元素上時，鼠標“箭頭”不會進入a元素變成“小手” */
display: block;
/* 內容水平居中 */
text-align: center;
/* 字體樣式 */
font-size: 14px;
color: #777777;
font-family: Verdana, Arial, "微軟雅黑", "宋體";
}
/* 超鏈接懸浮效果 */
.nav a:hover {
background-color: #3f3f3f;
color: #e8e7e3;
}
html 代碼
<ul class="menu">
<li class="nav"><a href="#">HTML/CSS</a></li>
<li class="nav"><a href="#">Browser Side</a></li>
<li class="nav"><a href="#">Server Side</a></li>
<li class="nav"><a href="#">Programming</a></li>
<li class="nav"><a href="#">XML</a></li>
<li class="nav"><a href="#">Web Building</a></li>
<li class="nav"><a href="#">Reference</a></li>
</ul>
效果
