您的位置：首页 > Web前端 > CSS

30-CSS-09-CSS(CSS的布局-漂浮)

2015-08-13 18:08 597 查看

【CSS的布局-漂浮】

查阅API，发现漂浮用float表示，其有三个值：none（默认值）、left、right，

none：设置对象不浮动

left：设置对象浮在左边

right：设置对象浮在右边

另外，API中还有用于清除漂浮的方法：clear，其有四个值：

none:允许两边都可以有浮动对象

both:不允许有浮动对象

left:不允许左边有浮动对象

right:不允许右边有浮动对象

==============================================================================================================

【代码】

<html>
<head>
<style type="text/css">
div{
border:#09F solid 1px;
height:100px;
width:200px;
}

#div_1{
background-color:#F90;
float:left;
}

#div_2{
background-color:#0CF;
float:left;
}

#div_3{
background-color:#3F0;
clear:right;
}
</style>
</head>

<body>
<div id="div_1">
盒子11
</div>

<div id="div_2">
盒子22
</div>

<div id="div_3">
盒子33
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航