CSS浮动效果详解-优快云博客

在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; }
效果如图