html中的float
<!doctype html>
<html >
<head>
<meta charset="UTF-8">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title></title>
<style type="text/css">
*{margin:0; padding:0;}
.box{
background-color:#6699cc;
width:900px;
height:500px;
margin:0 auto;
}
.left{
background-color:#ff0066;
width:300px;
height:200px;
float:left;
}
.right{
background-color:#ffff00;
width:580px;
height:200px;
float:right;
}
.bottom{
background-color:#000000;
width:900px;
height:300px;
}
</style>
</head>
<body>
<div class="box">
<div class="left"></div>
<div class="right"></div>
<div class="bottom"></div>
</div>
</body>
</html>
为什么这个float中 bottom所代表的那个盒子会在left right两个盒子的下面，然而在bottom中添加clear:both;就能使bottom那个盒子移动到底部了
街角疯3回答
-
我姓蒋
浮动有点类似于z-index：9（就是脱离底层的意思） -
学习js
元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。
随时随地看视频慕课网APP
Html/CSS