如下图所示的浮动练习实战
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>42-浮动练习</title>
<style>
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,
form,fieldset,legend,input,textarea,p,blockquote,th,td
{
margin:0;
padding:0;
}
.header{
width: 980px;
height: 100px;
background-color: white;
margin: 0 auto;
}
.header .box1{
width: 250px;
height: 100px;
background-color: pink;
float: left;
}
.header .box2{
width: 150px;
height: 50px;
background-color: skyblue;
float: right;
}
.header .box3{
width: 650px;
height: 50px;
background-color: #CC00FF;
float: right;
}
.content{
width: 980px;
height: 400px;
background-color: white;
margin: 0 auto;
margin-top: 10px;
}
.content .box4{
width: 320px;
height: 400px;
background-color: yellow;
float: left;
}
.content .box5{
width: 650px;
height: 400px;
background-color: white;
float: right;
}
.content .box5 .box6{
width: 400px;
height: 350px;
background-color: rgba(100, 149, 237, 0);
float: left;
}
.content .box5 .box6 .box9{
width: 400px;
height: 200px;
background-color: #ff1078;
}
.content .box5 .box6 .box10{
width: 400px;
height: 140px;
background-color: #1ff3ff;
margin-top: 10px;
}
.content .box5 .box7{
width: 240px;
height: 350px;
background-color: #33CC33;
float: right;
}
.content .box5 .box8{
width: 650px;
height: 40px;
background-color: #af820c;
float: right;
margin-top: 10px;
}
.footer{
width: 980px;
height: 40px;
background-color: red;
margin: 0 auto;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="header">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
<div class="content">
<div class="box4"></div>
<div class="box5">
<div class="box6">
<div class="box9"></div>
<div class="box10"></div>
</div>
<div class="box7"></div>
<div class="box8"></div>
</div>
</div>
<div class="footer"></div>
</body>
</html>