(转)DIV入门之流式布局：float,clear <等>

最新推荐文章于 2022-06-19 15:09:30 发布

ElvisDu

最新推荐文章于 2022-06-19 15:09:30 发布

阅读量417

点赞数

分类专栏：前端相关

前端相关专栏收录该内容

14 篇文章

订阅专栏

本文介绍了CSS中float属性的三种设置方式及其对div布局的影响，并详细解释了clear属性的四种用法，帮助读者更好地掌握网页布局技巧。

http://blog.youkuaiyun.com/kissme_a/article/details/18910991

float有三种：（注意每行的长度，如div总长度超过行长，则会下调，发生错误）！！！

float:left表示允许向左流动

float:right表示允许向右流动

float:none表示不允许流动

[css]view plaincopy 
   
print?
 //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  
 }  

[css]view plaincopy 
   
print?
 <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表示不允许有浮动对象单独成行

[css]view plaincopy 
   
print?
 //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  
 }  

[css]view plaincopy 
   
print?
 <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>  