サマリー：<!DOCTYPE html> <html> <head> <title>css中的浮動(dòng)</title> <style type="text/css"> li{ list-style: none; /*列表樣式去掉*/ width: 80px;he
<!DOCTYPE html>
<html>
<head>
<title>css中的浮動(dòng)</title>
<style type="text/css">
li{
list-style: none; /*列表樣式去掉*/
width: 80px;height: 40px;
background: #ccc;
line-height: 40px;
text-align: center;
margin-left: 2px;
float: left;
}
.clear{clear: both;} /*也有上下左右之分*/
.box{
width: 100px;height: 100px;
background: red;
float: right;
margin: 100px 100px;
}
</style>
</head>
<body>
<!-- 一般兩個(gè)塊級(jí)元素是向下排列的,用浮動(dòng)就可以使他們并列在一行;浮動(dòng)用完后必須消除 -->
<ul>
<li>html</li>
<li>js</li>
<li>web</li>
<li>php</li>
</ul>
<!-- 上面有用到浮動(dòng),那么后面布局就要清除浮動(dòng) -->
<div class="clear"></div>
<div class="box"></div>
</body>
</html>
添削の先生：查無(wú)此人添削時(shí)間：2019-04-03 13:29:23
先生のまとめ：完成的不錯(cuò)。浮動(dòng)有時(shí)候很難控制，要多練習(xí)。繼續(xù)加油