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

来源：互联网发布：股票买卖模拟软件编辑：程序博客网时间：2024/05/22 10:16

http://blog.csdn.net/kissme_a/article/details/18910991

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

float:left表示允许向左流动

float:right表示允许向右流动

float:none表示不允许流动

[css] view plain copy
 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 plain copy
 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 plain copy
 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 plain copy
 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>  

有些情况还是比较特殊，有点弄不明白，要是有大神给知道就大好了

0 0