abstract：HTML：<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>CSS浮动</title> <link rel="stylesheet" type="text/css" href="inde
HTML：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS浮动</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div class="float-left">
</div>
<div class="float-right">
<form>
<table>
<tr>
<td>
<input type="text" placeholder="请输入用户名">
</td>
</tr>
<tr>
<td>
<input type="password" placeholder="请输入密码">
</td>
</tr>
</table>
</form>
</div>
<div class="clear">
</div>
</body>
</html>
CSS：
*{margin: 0;
padding: 0;
}
.float-left{
float: left;
background-color: #df9f9f;
border-radius: 20px;
width: 400px;
height: 400px;
box-shadow: 10px 10px 5px #ccc;
}
.float-right{
float: right;
background-color: #ffa64d;
width: 300px;
height: 300px;
text-align: center;
box-shadow: -10px 10px 10px #ccc;
}
table{
margin: auto;
margin-top: 90px;
text-align: center;
}
input{
font-size: 30px;
height: 50px;
width: 260px;
text-align: center;
background-color: #7fcc66;
border: 0;
border-radius: 30px;
}
Correcting teacher：天蓬老师Correction time：2018-12-21 11:25:58
Teacher's summary：浮动在页面中应用极广 ,但是也会有很大的副作用, 如果能用绝对定位解决, 就首选绝对定位, 如果用浮动更简单,就用浮动
