abstract：<!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>
Correcting teacher：西门大官人Correction time：2019-04-22 09:42:22
Teacher's summary：最好上传一下程序的运行效果图。说明一下float left 和float right的区别及如何清除浮动，为什么要清除浮动