abstrait：<!DOCTYPE html><head> <meta charset="UTF-8"> <title>CSS中的浮動(dòng)</title> <link rel="shortcut icon" type="image/x-icon" href="../Public/im
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>CSS中的浮動(dòng)</title>
<link rel="shortcut icon" type="image/x-icon" href="../Public/images/2.1.png">
<!-- 外部樣式 -->
<link rel="stylesheet" type="text/css" href="../Public/css/2.1.css">
<!-- 內(nèi)部樣式 -->
<style type="text/css">
/* float: left; 左浮動(dòng) 浮動(dòng)屬性會(huì)脫離文檔普通流 一定要清除浮動(dòng) */
ul li{
list-style: none;
width: 100px;
height: 40px;
line-height: 40px;
text-align: center;
background: #ccc;
margin: 0 1px;
float: left;
}
.box1{width: 200px;height: 200px;background:red; float: right;}
/* .clear{clear: both;} left清除左邊浮動(dòng) right清除右邊浮動(dòng) both清除兩邊浮動(dòng) */
.clear{clear: both;}
</style>
</head>
<body>
<ul>
<li>html</li>
<li>css</li>
<li>JavaScript</li>
<li>jQuery</li>
<li>php</li>
</ul>
<div class="clear"></div>
<div class="box1">div1</div>
<div class="box1">div2</div>
<div class="box1">div3</div>
</body>
</html>
Professeur correcteur：查無(wú)此人Temps de correction：2019-03-25 09:24:44
Résumé du professeur：完成的不錯(cuò)。浮動(dòng)在css里比較常用，要牢記。繼續(xù)加油