HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试</title>
<link rel="stylesheet" type="text/css" href="Text07.css">
</head>
<body>
<div id="container">
<div id="fd1"></div>
<div id="fd2"></div>
<div id="fd3"></div>
<div id="fd4">EDG内战幻神</div>
</div>
</body>
</html>CSS代码
#fd1{
width: 100px;
height: 100px;
background-color: firebrick;
float: left;
/*浮动的效果类似与绝对布局，像两个图层，如果向左浮动，就从左到右找到足够空间就向右排列
去掉向左浮动，就是按照HTML的默认的排列方式排列*/
}
#fd2{
width: 150px;
height: 150px;
background-color:deepskyblue;
float: left;
}
#fd3{
width: 150px;
height: 150px;
background-color:forestgreen;
float: left;
}
#fd4{
clear: left;
}
#container{
width: 300px;
height: 300px;
background-color: beige;
}字没有去掉浮动效果：
去掉浮动效果之后：
