浮動(dòng)在網(wǎng)頁中的應(yīng)用
主要用于使得div脫離標(biāo)準(zhǔn)文檔流，生成多列布局
image.png
image.png
float屬性
left
元素向左浮動(dòng)
right
元素向右浮動(dòng)
none
默認(rèn)值侍咱。元素不浮動(dòng)，并會(huì)顯示在其文本中出現(xiàn)的位置
浮動(dòng)就是讓元素可以向左或向右移動(dòng)，直到它的外邊距碰到其父級(jí)的內(nèi)邊距或者是上一個(gè)元素的外邊距(這里指的上一個(gè)元素不管它有沒有設(shè)置浮動(dòng)，都會(huì)緊挨著上一個(gè)元素）
浮動(dòng)的特性
1.浮動(dòng)元素支持所有的css樣式
2.內(nèi)容撐開寬高
3.多個(gè)元素設(shè)置浮動(dòng)加酵，寬度足夠的話，會(huì)排在一行
4.脫離文檔流
5.提升層級(jí)半級(jí)
也就是說：一個(gè)元素設(shè)置了浮動(dòng)屬性后哭当，下一個(gè)元素就會(huì)無視這個(gè)元素的存在猪腕，但是下一個(gè)元素中的文本內(nèi)容依然會(huì)為這個(gè)元素讓出位置使自身的文本內(nèi)容環(huán)繞在設(shè)置浮動(dòng)元素的周圍
注意：不管是行級(jí)還是塊級(jí)元素，如果設(shè)置了浮動(dòng)屬性钦勘，該元素就變成了具有inline-block屬性的元素
浮動(dòng)—都不浮動(dòng)
<div class="class1">我是塊級(jí)元素1陋葡，沒有設(shè)置浮動(dòng)</div>
<div class="class2">我是塊級(jí)元素2，沒有設(shè)置浮動(dòng)</div>
<div class="class3">我是塊級(jí)元素3彻采，沒有設(shè)置浮動(dòng)</div>
.class1 {
width: 200px;
height: 100px;
background: palegreen;
}
.class2 {
width: 250px;
height: 130px;
background: gold;
}
.class3 {
width: 300px;
height: 180px;
background: red;
}
image.png
浮動(dòng)—第一個(gè)div浮動(dòng)
<div class="class1">我是塊級(jí)元素1腐缤，沒有設(shè)置浮動(dòng)</div>
<div class="class2">我是塊級(jí)元素2朵栖，沒有設(shè)置浮動(dòng)</div>
<div class="class3">我是塊級(jí)元素3，沒有設(shè)置浮動(dòng)</div>
.class1 {
width: 200px;
height: 100px;
background: palegreen;
float: left
}
.class2 {
width: 250px;
height: 130px;
background: gold;
}
.class3 {
width: 300px;
height: 180px;
background: red;
}
1）沒有設(shè)置浮動(dòng)的元素會(huì)填充浮動(dòng)元素留下來的空間
2）浮動(dòng)元素會(huì)和非浮動(dòng)元素發(fā)生重疊柴梆，浮動(dòng)元素會(huì)在圖層的最上面
3）使用浮動(dòng)時(shí)陨溅，該元素會(huì)脫離文檔流，后面的元素會(huì)無視這個(gè)元素绍在，但文本依然會(huì)為這個(gè)浮動(dòng)元素讓出位置门扇，并且元素中的文字內(nèi)容會(huì)環(huán)繞在其周圍
image.png
浮動(dòng)—第二個(gè)div浮動(dòng)
<div class="class1">我是塊級(jí)元素1，沒有設(shè)置浮動(dòng)</div>
<div class="class2">我是塊級(jí)元素2偿渡，沒有設(shè)置浮動(dòng)</div>
<div class="class3">我是塊級(jí)元素3臼寄，沒有設(shè)置浮動(dòng)</div>
.class1 {
width: 200px;
height: 100px;
background: palegreen;
}
.class2 {
width: 250px;
height: 130px;
background: gold;
float: left
}
.class3 {
width: 300px;
height: 180px;
background: red;
}
浮動(dòng)元素不會(huì)超越其前面的元素
image.png
<div class="class1">我是塊級(jí)元素1，沒有設(shè)置浮動(dòng)</div>
<div class="class2">我是塊級(jí)元素2溜宽，沒有設(shè)置浮動(dòng)</div>
<div class="class3">我是塊級(jí)元素3吉拳，沒有設(shè)置浮動(dòng)</div>
.class1 {
width: 200px;
height: 100px;
background: palegreen;
}
.class2 {
width: 250px;
height: 130px;
background: gold;
float: left
}
.class3 {
width: 300px;
height: 180px;
background: red;
}
瀏覽器寬度足夠時(shí)，并排排列
image.png
瀏覽器寬度不足以容納最后一個(gè)div時(shí)适揉，最后一個(gè)div掉下來留攒，并且頂部不會(huì)超過倒數(shù)第二個(gè)div的底部。
image.png
浮動(dòng)—父子關(guān)系
<div id="wrap2">
<div class="class1"></div>
<div class="class2"></div>
<div class="class3"></div>
<div class="class4"></div>
</div>
#wrap2 {
width: 550px;
height: 900px;
border: 3px solid red;
}
.class1 {
width: 200px;
height: 400px;
background: blue;
float: left;
}
.class2 {
width: 200px;
height: 300px;
background: yellow;
float: left;
}
.class3 {
width: 200px;
height: 300px;
background: fuchsia;
float: left;
}
.class4 {
width: 200px;
height: 200px;
background: chartreuse;
float: left;
}
1）浮動(dòng)元素不會(huì)在其浮動(dòng)方向上溢出父級(jí)的包含塊
也就是說元素左浮動(dòng)嫉嘀，其左外邊距不會(huì)超過父級(jí)的左內(nèi)邊距炼邀，元素右浮動(dòng)，其右外邊距不會(huì)超過父級(jí)的右內(nèi)邊距
2）浮動(dòng)元素的位置受到同級(jí)同向浮動(dòng)元素的影響
也就是說同一父級(jí)中有多個(gè)浮動(dòng)元素剪侮，后一個(gè)元素的位置會(huì)受到前一個(gè)浮動(dòng)元素位置的影響拭宁，他們不會(huì)相互遮擋，后一個(gè)浮動(dòng)元素會(huì)緊挨著前一個(gè)浮動(dòng)元素的左外邊距進(jìn)行定位瓣俯，如果當(dāng)前空間不足杰标，則會(huì)換行，否則會(huì)放置在前一個(gè)浮動(dòng)元素的下面
image.png
浮動(dòng)影響父層盒子高度
父元素的高度靠子元素?fù)伍_彩匕，子元素全部浮動(dòng)后腔剂，均脫離文檔流，父元素高度塌陷
<div id="wrap2">
<div class="class1"></div>
<div class="class2"></div>
<div class="class3"></div>
<div class="class4"></div>
</div>
#wrap2 {
width: 550px;
border: 3px solid red;
}
.class1 {
width: 200px;
height: 400px;
background: blue;
float: left;
}
.class2 {
width: 200px;
height: 300px;
background: yellow;
float: left;
}
.class3 {
width: 200px;
height: 300px;
background: fuchsia;
float: left;
}
.class4 {
width: 200px;
height: 200px;
background: chartreuse;
float: left;
}
image.png
溢出處理
overflow屬性
visible
默認(rèn)值推掸。內(nèi)容不會(huì)被修剪桶蝎，會(huì)呈現(xiàn)在盒子之外
hidden
內(nèi)容會(huì)被修剪，并且其余內(nèi)容是不可見的
scroll
內(nèi)容會(huì)被修剪谅畅，但是瀏覽器會(huì)顯示滾動(dòng)條以便查看其余內(nèi)容
auto
如果內(nèi)容被修剪登渣，則瀏覽器會(huì)顯示滾動(dòng)條以便查看其余的內(nèi)容
overflow屬性的妙用
使用overflow擴(kuò)展盒子高度，overflow屬性會(huì)觸發(fā)瀏覽器重新計(jì)算父元素盒子高度
<div id="wrap2">
<div class="class1"></div>
<div class="class2"></div>
<div class="class3"></div>
<div class="class4"></div>
</div>
#wrap2 {
width: 550px;
border: 3px solid red;
overflow:hidden;
}
.class1 {
width: 200px;
height: 400px;
background: blue;
float: left;
}
.class2 {
width: 200px;
height: 300px;
background: yellow;
float: left;
}
.class3 {
width: 200px;
height: 300px;
background: fuchsia;
float: left;
}
.class4 {
width: 200px;
height: 200px;
background: chartreuse;
float: left;
}
image.png
清除浮動(dòng)
clear屬性
left
在左側(cè)不允許浮動(dòng)元素
right
在右側(cè)不允許浮動(dòng)元素
both
在左毡泻、右兩側(cè)不允許浮動(dòng)元素
none
默認(rèn)值胜茧。允許浮動(dòng)元素出現(xiàn)在兩側(cè)
清除兩測浮動(dòng)
清除兩側(cè)浮動(dòng)，有擴(kuò)展父級(jí)盒子高度的作用
<div id="wrap2">
<div class="class1"></div>
<div class="class2"></div>
<div class="class3"></div>
<div class="class4"></div>
<p class="txt">我是一段文本我是一段文本我是一段文本我是一段文本</p>
</div>
#wrap2 {
width: 550px;
border: 3px solid red;
}
.class1 {
width: 200px;
height: 400px;
background: blue;
float: left;
}
.class2 {
width: 200px;
height: 300px;
background: yellow;
float: left;
}
.class3 {
width: 200px;
height: 300px;
background: fuchsia;
float: left;
}
.class4 {
width: 200px;
height: 200px;
background: chartreuse;
float: left;
}
.txt {
clear: both
}
清除兩側(cè)浮動(dòng)前
清除兩側(cè)浮動(dòng)后，有擴(kuò)展父級(jí)盒子高度的作用
image.png
制作有路網(wǎng)水平導(dǎo)航菜單
image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="reset.css" rel="stylesheet">
<style>
.red-nav{
height: 38px;
background-color: #D80000;
}
.red-nav li{
float: left;
line-height: 38px;
font-size: 16px;
font-weight: bold;
padding: 0 25px;
}
.red-nav li a{
color: white;
}
.red-nav li:hover{
background-color: #C90000;
}
.red-nav .first{
background-color: #C90000;
padding-left: 20px;
padding-right: 100px;
/*margin-right: 100px;*/
}
</style>
</head>
<body>
<div class="red-nav">
<ul>
<li class="first">
<a href="#">全部圖書分類</a>
</li>
<li>
<a href="#">考試</a>
</li>
<li>
<a href="#">考試</a>
</li>
<li>
<a href="#">考試</a>
</li>
<li>
<a href="#">考試</a>
</li>
<li>
<a href="#">考試</a>
</li>
<li>
<a href="#">考試</a>
</li>
<li>
<a href="#">考試</a>
</li>
</ul>
</div>
</body>
</html>
制作有路網(wǎng)搜索欄
image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="reset.css">
<style>
.search-bar{
width: 1200px;
margin: 40px auto 0;
overflow: hidden;
/*border: 3px solid black;*/
}
.search-bar .logo{
float: left;
margin-right: 64px;
/*border: 1px solid blue;*/
}
.search-bar .search-block{
/*border: 1px solid blue;*/
float: left;
}
.search-bar .cart{
float: right;
/*border: 1px solid blue;*/
}
.search-bar .hot-search li{
display: inline-block;
font-size: 16px;
line-height: 32px;
font-weight: bold;
padding: 0px 2px;
}
.search-bar .hot-search li a{
color: gray;
}
.search-bar .hot-search li a:hover
{
text-decoration: underline;
color: orange;
}
.search-bar .cart
{
background-image: url("cart.jpg");
background-repeat: no-repeat;
/*border: 1px solid blue;*/
padding-left: 44px;
line-height: 20px;
}
.search-bar .cart a{
color: black;
}
.search-bar .cart a:hover {
text-decoration: underline;
}
.search-bar .cart span{
color: red;
font-weight: bold;
}
.search{
width: 509px;
margin: 0 auto;
/*margin-top: 60px;*/
height: 40px;
}
.search .input{
width: 400px;
height: 36px;
border: 3px solid red;
font-size: 20px;
}
.search .btn{
vertical-align: top;
height: 42px;
width: 100px;
margin-left: -3px;
border: 0px solid black;
background-color: red;
color: white;
font-size: 18px;
font-weight: bold;
letter-spacing: 6px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="search-bar">
<div class="logo">
<img src="logo.jpg">
</div>
<div class="search-block">
<div class="search">
<form action="#">
<input type="text" class="input" placeholder="書名"><input type="submit" value="搜索" class="btn">
</form>
</div>
<div class="hot-search">
<ul>
<li>熱門搜索：</li>
<li><a href="#">高等數(shù)學(xué)</a></li>
<li><a href="#">高等數(shù)學(xué)</a></li>
<li><a href="#">高等數(shù)學(xué)</a></li>
<li><a href="#">高等數(shù)學(xué)</a></li>
</ul>
</div>
</div>
<div class="cart">
<div><a href="#">網(wǎng)站購物車<span>3</span>本</a></div>
<div><a href="#">網(wǎng)站購物車<span>0</span>本</a></div>
</div>
</div>
</body>
</html>
制作有路網(wǎng)推薦圖書頁面
image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="reset.css" rel="stylesheet">
<style>
.book-recommend{
width: 750px;
margin: 100px auto 0px;
}
.book-recommend .header
{
border-bottom: 1px solid gray;
background-image: url("img/laba.jpg");
background-repeat: no-repeat;
background-position: 0px 8px;
/*border: 1px solid red;*/
}
.book-recommend .header div{
float: right;
padding-top: 6px;
padding-right: 6px;
font-size: 16px;
}
.book-recommend .header div span{
color: red;
}
.book-recommend .header h2
{
font-size: 22px;
font-weight: bold;
padding-left: 20px;
padding-bottom: 8px;
}
.content
{
padding-top: 10px;
}
.content div{
text-align: left;
padding-left: 30px;
line-height: 32px;
}
.content li
{
width: 187px;
float: left;
text-align: center;
}
.content .price{
margin-top: -10px;
margin-bottom: 20px;
font-size: 14px;
}
.content .price .discount{
color: red;
font-weight: bold;
margin-right: 6px;
}
.content .price .origin-price{
color: gray;
text-decoration: line-through;
}
.content .author{
color:gray;
}
.content li a{
color: black;
}
.content li a:hover{
color: orange;
text-decoration: underline;
}
.content li img
{
max-width: 160px;
height: 160px;
}
</style>
</head>
<body>
<div class="book-recommend">
<div class="header">
<div><span>1</span>/4</div>
<h2>推薦圖書</h2>
</div>
<div class="content">
<ul>
<li>
<img src="img/狼圖騰.jpg">
<div><a href="#">狼圖騰（修訂版）</a></div>
<div class="author">姜戎</div>
<div class="price">
<span class="discount">￥15.90</span>
<span class="origin-price">￥39.80</span>
</div>
</li>
<li>
<img src="img/文化苦旅.jpg">
<div><a href="#">狼圖騰（修訂版）</a></div>
<div class="author">姜戎</div>
<div class="price">
<span class="discount">￥15.90</span>
<span class="origin-price">￥39.80</span>
</div>
</li>
<li>
<img src="img/平凡的世界.jpg">
<div><a href="#">狼圖騰（修訂版）</a></div>
<div class="author">姜戎</div>
<div class="price">
<span class="discount">￥15.90</span>
<span class="origin-price">￥39.80</span>
</div>
</li>
<li>
<img src="img/偷影子的人.jpg">
<div><a href="#">狼圖騰（修訂版）</a></div>
<div class="author">姜戎</div>
<div class="price">
<span class="discount">￥15.90</span>
<span class="origin-price">￥39.80</span>
</div>
</li>
<li>
<img src="img/狼圖騰.jpg">
<div><a href="#">狼圖騰（修訂版）5</a></div>
<div class="author">姜戎</div>
<div class="price">
<span class="discount">￥15.90</span>
<span class="origin-price">￥39.80</span>
</div>
</li>
<li>
<img src="img/狼圖騰.jpg">
<div><a href="#">狼圖騰（修訂版）6</a></div>
<div class="author">姜戎</div>
<div class="price">
<span class="discount">￥15.90</span>
<span class="origin-price">￥39.80</span>
</div>
</li>
<li>
<img src="img/蔡永康.jpg">
<div><a href="#">狼圖騰（修訂版）7</a></div>
<div class="author">姜戎</div>
<div class="price">
<span class="discount">￥15.90</span>
<span class="origin-price">￥39.80</span>
</div>
</li>
<li>
<img src="img/狼圖騰.jpg">
<div><a href="#">狼圖騰（修訂版）</a></div>
<div class="author">姜戎</div>
<div class="price">
<span class="discount">￥15.90</span>
<span class="origin-price">￥39.80</span>
</div>
</li>
</ul>
</div>
</div>
</body>
</html>
項(xiàng)目實(shí)戰(zhàn)
制作有路網(wǎng)近期熱銷榜
image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="reset.css">
<style>
.hot{
width: 220px;
/*border: 1px solid red;*/
float: right;
}
.hot h2{
font-size: 16px;
line-height: 40px;
padding-left: 34px;
}
.hot ul{
border: 1px solid gray;
font-size: 14px;
}
.hot li .book1{
line-height: 44px;
border-bottom: 1px dashed gray;
padding-left: 14px;
}
.hot li span
{
margin-right: 6px;
font-weight: bold;
}
.hot .red{
color: red;
}
.hot .book2
{
display: none;
}
.hot .book2{
height: 102px;
border-bottom: 1px dashed gray;
}
.hot .book2 div{
margin-top: 6px;
float: left;
}
.hot .book2 img
{
width: 76px;
}
.hot .book2 .nored{
margin-left: 10px;
display: inline-block;
margin-top: 6px;
}
.hot .book2 .red
{
margin-left: 10px;
display: inline-block;
margin-top: 6px;
}
.hot .book2 .title{
font-size: 14px;
margin-bottom: 22px;
}
.hot .book2 .discount-price{
font-size: 16px;
font-weight: bold;
color: red;
}
.hot .book2 .old-price{
font-size: 14px;
color: gray;
text-decoration: line-through;
}
.hot li:hover .book1{
display: none;
}
.hot li:hover .book2{
display: block;
}
</style>
</head>
<body>
<div class="hot">
<h2>近期熱銷榜</h2>
<ul>
<li>
<div class="book1"><span class="red">1</span>如果蝸牛有愛情（上下</div>
<div class="book2">
<div><span class="red">1</span></div>
<div><img src="img/螢火蟲小巷.jpg"></div>
<div>
<p class="title">螢火蟲小巷</p>
<p class="discount-price">￥14.40</p>
<p class="old-price">￥36.00</p>
</div>
</div>
</li>
<li>
<div class="book1"><span class="red">1</span>如果蝸牛有愛情（上下</div>
<div class="book2">
<div><span class="red">1</span></div>
<div><img src="img/螢火蟲小巷.jpg"></div>
<div>
<p class="title">螢火蟲小巷</p>
<p class="discount-price">￥14.40</p>
<p class="old-price">￥36.00</p>
</div>
</div>
</li>
<li>
<div class="book1"><span class="red">1</span>如果蝸牛有愛情（上下</div>
<div class="book2">
<div><span class="red">1</span></div>
<div><img src="img/螢火蟲小巷.jpg"></div>
<div>
<p class="title">螢火蟲小巷</p>
<p class="discount-price">￥14.40</p>
<p class="old-price">￥36.00</p>
</div>
</div>
</li>
<li>
<div class="book1"><span>4</span>如果蝸牛有愛情（上下</div>
<div class="book2">
<div><span class="nored">4</span></div>
<div><img src="img/螢火蟲小巷.jpg"></div>
<div>
<p class="title">螢火蟲小巷</p>
<p class="discount-price">￥14.40</p>
<p class="old-price">￥36.00</p>
</div>
</div>
</li>
<li>
<div class="book1"><span>4</span>如果蝸牛有愛情（上下</div>
<div class="book2">
<div><span class="nored">1</span></div>
<div><img src="img/螢火蟲小巷.jpg"></div>
<div>
<p class="title">螢火蟲小巷</p>
<p class="discount-price">￥14.40</p>
<p class="old-price">￥36.00</p>
</div>
</div>
</li>
<li>
<div class="book1"><span>4</span>如果蝸牛有愛情（上下</div>
<div class="book2">
<div><span class="nored">1</span></div>
<div><img src="img/螢火蟲小巷.jpg"></div>
<div>
<p class="title">螢火蟲小巷</p>
<p class="discount-price">￥14.40</p>
<p class="old-price">￥36.00</p>
</div>
</div>
</li>
<li>
<div class="book1"><span>4</span>如果蝸牛有愛情（上下</div>
<div class="book2">
<div><span class="nored">1</span></div>
<div><img src="img/螢火蟲小巷.jpg"></div>
<div>
<p class="title">螢火蟲小巷</p>
<p class="discount-price">￥14.40</p>
<p class="old-price">￥36.00</p>
</div>
</div>
</li>
<li>
<div class="book1"><span>4</span>如果蝸牛有愛情（上下</div>
<div class="book2">
<div><span class="nored">1</span></div>
<div><img src="img/螢火蟲小巷.jpg"></div>
<div>
<p class="title">螢火蟲小巷</p>
<p class="discount-price">￥14.40</p>
<p class="old-price">￥36.00</p>
</div>
</div>
</li>
<li>
<div class="book1"><span>4</span>如果蝸牛有愛情（上下</div>
<div class="book2">
<div><span class="nored">1</span></div>
<div><img src="img/螢火蟲小巷.jpg"></div>
<div>
<p class="title">螢火蟲小巷</p>
<p class="discount-price">￥14.40</p>
<p class="old-price">￥36.00</p>
</div>
</div>
</li>
<li>
<div class="book1"><span>4</span>如果蝸牛有愛情（上下</div>
<div class="book2">
<div><span class="nored">1</span></div>
<div><img src="img/螢火蟲小巷.jpg"></div>
<div>
<p class="title">螢火蟲小巷</p>
<p class="discount-price">￥14.40</p>
<p class="old-price">￥36.00</p>
</div>
</div>
</li>
</ul>
</div>
</body>
</html>
課后作業(yè)
必做任務(wù)
1.制作帶按鈕的輪播圖（浮動(dòng)呻顽，定位）
2.制作網(wǎng)站導(dǎo)航（ 列表的浮動(dòng)）
3.制作誰偷了我的能量（列表的浮動(dòng)雹顺，定位）
擴(kuò)展任務(wù)
1.制作網(wǎng)頁布局（浮動(dòng)）
2.制作商品列表（浮動(dòng)，div）
