摘要：<!DOCTYPE html><head> <meta charset="UTF-8"> <title>CSS中的浮動</title> <link rel="shortcut icon" type="image/x-icon" href="../Public/im
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>CSS中的浮動</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">
<!-- 內部樣式 -->
<style type="text/css">
/* float: left; 左浮動 浮動屬性會脫離文檔普通流 一定要清除浮動 */
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清除左邊浮動 right清除右邊浮動 both清除兩邊浮動 */
.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>
批改老師：查無此人批改時間：2019-03-25 09:24:44
老師總結：完成的不錯。浮動在css里比較常用，要牢記。繼續(xù)加油