摘要：float:left ,right; 一但浮動(dòng)起來(lái),就是脫離文檔流.與本頁(yè)面無(wú)關(guān)系,簡(jiǎn)單說(shuō)就像是飄起來(lái)一樣!形成另一層次,本頁(yè)面部分就會(huì)被護(hù)蓋,當(dāng)本頁(yè)面浮動(dòng)起來(lái)時(shí)需要左右移動(dòng).<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"
float:left ,right; 一但浮動(dòng)起來(lái),就是脫離文檔流.
與本頁(yè)面無(wú)關(guān)系,簡(jiǎn)單說(shuō)就像是飄起來(lái)一樣!
形成另一層次,本頁(yè)面部分就會(huì)被護(hù)蓋,當(dāng)本頁(yè)面浮動(dòng)起來(lái)時(shí)需要左右移動(dòng).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS中的浮動(dòng)</title>
<style type="text/css">
ul li{
width: 100px;height:50px;background-color: lightskyblue;line-height: 50px;text-align: center;
margin: 0px 2px;list-style: none;
float: left;
}
.box1{
width: 100px;height: 100px;background-color: green;margin: 0px 2px;text-align: center;
float: right;
}
.clear{
clear: both;
}
</style>
</head>
<body>
<ul>
<li>楊海諾</li>
<li>唐果</li>
<li>楊海言</li>
<li>楊天琦</li>
<li>唐文杰</li>
</ul> /*清除僅僅只是演示*/
<div class="clear">清除</div>
<div class="box1">唐果</div>
<div class="box1">楊海言</div>
<div class="box1">楊天琦</div>
<div class="box1">唐文杰</div>
</body>
</html>
批改老師：查無(wú)此人批改時(shí)間：2019-05-21 09:18:20
老師總結(jié)：完成的不錯(cuò)。浮動(dòng)在移動(dòng)端用到的比較多。繼續(xù)加油。