今天第一课学了浮动和清除浮动
浮动:可以让块元素在一行上显示
float:left/right
你希望哪几个元素在一行上显示,就给那几个元素加浮动
用到了几处浮动,就需要清除几次
body:
<body>
<div class="box">
<div class="red"></div>
<div class="blue"></div>
<div class="yellow"></div>
<div class="clear"></div>
</div>
<div class="big">
<div class="pink"></div>
<div class="green"></div>
<div class="clear"></div>
</div>
</body>
style:
.red{
width: 500px;
height: 500px;
background-color: red;
float: left;
}
.blue{
width: 500px;
height: 500px;
background-color: blue;
float: right;
}
.yellow{
width: 550px;
height: 550px;
background-color: yellow;
float: right;
}
.box{width: 2000px;background-color: gray;}
.big{width: 2000px;background-color: purple;margin-top: 100px;}
.pink{width: 500px;height: 500px;background-color: pink;float: left;}
.green{width: 500px;height: 500px;background-color: green;float: left;}
.clear{clear:both;}