浮动流代码

作者: nickNic | 来源:发表于2019-07-15 15:07 被阅读0次

浮动流代码
day3-CSS属性
CSS 中的浮动
浮动与清除浮动
CSS浮动
# 网页的布局方式(标准流/浮动流/定位流)
浮动元素产生的浮动流及消除
浮动流
浮动流
浮动流

首先看效果

CA85D762-5447-40AF-BF26-EA0F5AF2DC61.png

OK 代码贴出来

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">

 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
}

div{
  margin: 0 auto;
}

.d1{

  background-color:  white;
  width: 980px;
  height: 100px;
  margin-bottom: 10px;

}
.d1l{
  width: 250px;
  height: 100px;
  background-color: darkred;
  float:  left;
}
.d1r{
  width: 150px;
  height: 50px;
  background-color: cornflowerblue;
  float:  right;
}
.d1b{
  width: 630px;
  height: 50px;
  background-color: purple;
  float:  right;
}
.d2{

  background-color:  white;
  width: 980px;
  height: 400px;
  margin-bottom: 10px;
}
.d2l{

  background-color:  yellow;
  width: 320px;
  height: 400px;
  float: left;
}
.d2r{

  background-color:  white;
  width: 650px;
  height: 400px;
  float: right;
}

.d2rt{

  background-color:  orangered;
  width: 400px;
  height: 200px;
  float: left;
  margin-bottom: 10px;
}
.d2rr{

  background-color:  greenyellow;
  width: 240px;
  height: 350px;
  float: right;
}

.d2rc{

  background-color:  red;
  width: 400px;
  height: 140px;
  float: left;
  margin-bottom: 10px;
}
.d2rb{

  background-color:  dimgray;
  width: 650px;
  height: 40px;
  float: left;
}

.d3{

  background-color:  blue;
  width: 980px;
  height: 40px;
}

</style>
</head>
<body>


<div class="d1">
<div class="d1l">
</div>
<div class="d1r">
</div>
<div class="d1b">
</div>
</div>


<div class="d2">
<div class="d2l"></div>
<div class="d2r">
<div class="d2rt">


</div>

<div class="d2rr">


</div>


<div class="d2rc">


</div>


<div class="d2rb">


</div>


</div>

</div>
<div class="d3">

</div>

</body>
</html>