元素浮动

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>float属性</title>
<style type="text/css">
body{
 margin:15px;
 font-family:Arial, Helvetica, sans-serif; 
}
 
.father{
 background-color:#ffff99;
 border:1px solid #111;
 padding:5px;/*内*/
 }

.father div{
padding:10px;
margin:15px;/*外*/
border:1px dashed #111;
background-color:#90bbff;
 }
 
 .son{
  
  position:relative;
  
  bottom:30px;
 }
 
.father p{
border:1px dashed #111;
background-color:#ff90ba;
clear:left;
}

.son1{
 position:fixed;
 top:20px;
 left:15px;
     
 
}

.son2{
 position:absolute;
 top:0px;
 left:0px;
     
  
}

.son3{
    
}


</style>
</head>

<body>
<div class="father">
<div class="son1">box-1</div>
<div class="son2">box-2</div>
<div class="son3">box-3</div>
<p>只是浮动框外的文字，这些文字在P中，是属于行内元素，从这部分内容的变换可以看出行内元素是如何浮动在块元素周围的，所以挺重要的，要认真看看是怎么回事。</p>
</div>
</body>
</html>

posted @ 2011-09-23 14:11  萧懿  Views(195)  Comments(0)    收藏  举报