猿问

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那个盒子移动到底部了




街角疯
浏览 1589回答 3
3回答

我姓蒋

浮动有点类似于z-index:9(就是脱离底层的意思)

学习js

元素浮动之后,周围的元素会重新排列,为了避免这种情况,使用 clear 属性。
随时随地看视频慕课网APP
我要回答