在CSS中,浮动是非常重要的一个功能,主要是用来控制行元素或者块元素并列显示或者向左或者向右浮动。下面
来看一下效果。
先看一下Div的向右浮动效果
HTML代码如下
<!DOCTYPE html>
<html>
<head>
<title>css的浮动效果</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="../css/myFloat.css" type="text/css"></link>
</head>
<body>
<div class="div3">
<div id="div2" class="div1">div1</div>
<div id="div2" class="div1">div2</div>
<div id="div2" class="div1">div3</div>
</div>
</body>
</html>
CSS代码如下
body{
margin: 0px;
padding: 0px;
}
.div1{
background-color: pink;
width: 150px;
height: 100px;
border: 1px solid blue;
margin-top: 5px;
margin-left: 5px;
}
#div2{
float: left;/*右浮动是指让她尽量向右浮动,直到父元素的右边界*/
}
.div3{
width: 800px;
height: 400px;
border: 1px solid blue;
}
效果如图