css布局

WEB前端 waitig 434℃ 百度已收录 0评论

float有三种:

float:left 表示允许向左流动

float:right 表示允许向右流动

float:none 表示不允许流动

示列1

<html> 

<style>
#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  }  
</style>

 
<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 表示不允许有浮动对象    单独成行

示列2

<html>  

<style>
#first{width:100px;
height:100px;
background:#00F;
float:left;//对象浮在左边

}
#second{width:100px;
height:100px;
background:#030;

clear:left;//不允许左边有浮动对象

}
#third{width:100px;
height:100px;
background:#93C;
float:right;//对象浮在右边
}  
</style>

<head>  
    <title>div的概念</title>  
      
</head>  
<body>  
    <div id="first">第一个div</div>  
    <div id="second">第二个div</div>  
    <div id="third">第三个div</div>  
     
</body>  
</html>  


本文由【waitig】发表在等英博客
本文固定链接:css布局
欢迎关注本站官方公众号,每日都有干货分享!
等英博客官方公众号
点赞 (0)分享 (0)