http://blog.csdn.net/kissme_a/article/details/18910991
float有三种:(注意每行的长度,如div总长度超过行长,则会下调,发生错误)!!!
float:left表示允许向左流动
float:right表示允许向右流动
float:none表示不允许流动
- //style.css
- #first{
- width:300px;
- height:200px;
- background:red;
- float:left
- }
-
- #second{
- width:300px;
- height:200px;
- background:pink;
- float:right
- }
-
- #third{
- width:300px;
- height:200px;
- background:green;
- float:right
- }
-
-
- #four{
- width:300px;
- height:200px;
- background:#fab;
- float:left
- }
- <html>
- <head>
- <title>div的概念</title>
- <link rel = "stylesheet" href = "style.css" type = "css/style.css"/>
- </head>
- <body>
- <div id="first">第一个div</div>
- <div id="second">第二个div</div>
- <div id="third">第三个div</div>
- <div id="four">第四个div</div>
- </body>
- </html>
clear有四种
clear:none表示允许两边有浮动对象
clear:left表示不允许左边有浮动对象
clear:right表示不允许右边有浮动对象
clear:both表示不允许有浮动对象 单独成行
- //style.css
- #first{
- width:300px;
- height:200px;
- background:red;
- float:left
- }
-
- #second{
- width:300px;
- height:200px;
- background:pink;
- float:right
- }
-
- #third{
- width:300px;
- height:200px;
- background:green;
- clear:left
- }
-
-
- #four{
- width:300px;
- height:200px;
- background:blue;
- float:right
- }
- <html>
- <head>
- <title>div的概念</title>
- <link rel = "stylesheet" href = "style.css" type = "css/style.css"/>
- </head>
- <body>
- <div id="first">第一个div</div>
- <div id="second">第二个div</div>
- <div id="third">第三个div</div>
- <div id="four">第四个div</div>
- </body>
- </html>
有些情况还是比较特殊,有点弄不明白,要是有大神给知道就大好了