<head>
<meta charset="UTF-8">
<title>float属性，overflow,z-index属性</title>
</head>
<style type="text/css">
div{
width:200px;
height:200px;
/*
使用float设置控件脱离顺序流。
float:
left:让控件在左边显示
right:让控件在右边显示
*/
float:left;
}
#d{
background-color:red;
}
#d1{
background-color:green;
}
#d3{
background-color:#336699;
}
p{
width:220px;
height:220px;
background-color:blue;
}
#d2{
width:100px;
height:100px;
background-color:#66ff00;
/*
overflow
auto:盒子中的内容超出范围的时候，让浏览器自动解决；
visible:盒子中的内容超出范围的时候，显示超出的部分；
hidden:盒子中的内容超出范围的时候，隐藏超出的部分；
*/
overflow: auto;
}
</style>
<body>
<divid = "d">一号</div>
<divid = "d1">二号</div>
<divid = "d3">三号</div>
<p></p>
<divid = "d2">
いらっしゃいませ
</div>
</body>
</html>
<!--结果：由于div脱离了顺序流，所以蓝色的p标签的原点变成了屏幕的左上角。
id2设置了overflow，所以浏览器自动加了滚动条来解决-->
float样式
猜你喜欢
转载自www.cnblogs.com/mywawa/p/9070715.html
今日推荐
周排行