サマリー：<!DOCTYPE html> <html> <head> <title>CSS浮動</title> <style type="text/css"> ul{list-style: none;padding: 0;margin: 0;margin-le
<!DOCTYPE html>
<html>
<head>
<title>CSS浮動</title>
<style type="text/css">
ul{list-style: none;padding: 0;margin: 0;margin-left: 50px}
li{background: #ccc;margin: 10px;width: 100px;height: 25px;float: left;text-align: center;}
li:hover{background:orange}
.blue{width: 600px;height: 600px;background: skyblue;position: relative;border-radius: 50px}
.clear{clear: both;}
.red,.black{width: 150px;height: 150px;background: red;position:absolute;right: 50px;top: 50px;border-radius: 50%}
.black{background: black;left: 50px;}
.smile{width: 400px;height: 100px;position: absolute;border-bottom:10px solid pink;border-bottom-right-radius:50px;border-bottom-left-radius:60px;top:350px;left:100px}
</style>
</head>
<body>
<div>
<ul>
<li>one</li>
<li>two</li>
<li>there</li>
<li>four</li>
</ul>
</div>
<div class="clear"></div>
<div class="blue">
<div class="red"></div>
<div class="black"></div>
<div class="smile"></div>
</div>
</body>
</html>
添削の先生：西門大官人添削時間：2019-04-22 09:42:22
先生のまとめ：最好上傳一下程序的運行效果圖。說明一下float left 和float right的區(qū)別及如何清除浮動，為什么要清除浮動