您的位置：首页 > 其它

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

2016-12-25 16:41 666 查看

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>

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航