DIV流式布局（float和clear）

最新推荐文章于 2021-08-15 10:31:03 发布

yayun0516

最新推荐文章于 2021-08-15 10:31:03 发布

阅读量5k

点赞数

分类专栏： css 文章标签：流式布局 float clear css html

本文链接：https://blog.csdn.net/yayun0516/article/details/41477259

版权

css 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

语法：

float : none | left |right

参数：

none : 　对象不浮动
left : 　对象浮在左边
right : 　对象浮在右边

说明：

该属性的值指出了对象是否及如何浮动。请参阅clear属性。
当该属性不等于none引起对象浮动时，对象将被视作块对象(block-level)，即display属性等于block。也就是说，浮动对象的display特性将被忽略。
对应的脚本特性为styleFloat。请参阅我编写的其他书目。

语法：

clear : none | left |right | both

参数：

none : 　允许两边都可以有浮动对象
both : 　不允许有浮动对象
left : 　不允许左边有浮动对象
right : 　不允许右边有浮动对象

说明：

该属性的值指出了不允许有浮动对象的边。请参阅float属性。
对应的脚本特性为clear。请参阅我编写的其他书目。

.html代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>流式布局</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>	
</head>

<body>
	<div id="first">第一个div</div>
	<div id="second">第二个div</div>	
	<div id="third">第三个div</div>
</body>
</html>

.css代码如下：

#first{
	width:200px;
	height:100px;
	background:#ab0;
	float:left;
}

#second{
	width:200px;
	height:100px;
	background:#fba;
        clear:left;
        
	
}
#third{
	width:200px;
	height:100px;
	background:#aca;
        float:left;
}

效果如下：

常用布局方法应为：

#first{
<span style="white-space:pre">	</span>width:200px;
<span style="white-space:pre">	</span>height:100px;
<span style="white-space:pre">	</span>background:#ab0;
<span style="white-space:pre">	</span>float:left;
}


#second{
<span style="white-space:pre">	</span>width:200px;
<span style="white-space:pre">	</span>height:100px;
<span style="white-space:pre">	</span>background:#fba;
        float:right;
        
        
<span style="white-space:pre">	</span>
}
#third{
<span style="white-space:pre">	</span>width:200px;
<span style="white-space:pre">	</span>height:100px;
<span style="white-space:pre">	</span>background:#aca;
        clear:both;
}

<img src="https://img-blog.csdn.net/20141125095922471?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveWF5dW4wNTE2/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />

yayun0516

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DIV流式布局（float和clear）

语法： float : none | left|right 参数： none : 　对象不浮动left : 　对象浮在左边right : 　对象浮在右边说明：该属性的值指出了对象是否及如何浮动。请参阅clear属性。当该属性不等于none引起对象浮动时，对象将被视作块对象(block-level)，即display属性等于blo
复制链接

扫一扫

专栏目录