html浮动布局
浮动布局:
之所以要使用到浮动布局,只要是像div等块标签,在网页显示时,无论其宽的大小,都是独占一行。而在网页布局中,我们常常需要将两个或者是多个div并排放置。由于div独占一行,并排是不可能实现的。所以我们需要采用浮动布局,所谓的浮动布局,可以这么来理解,将网页当作游泳池,游泳池分为水底和水面,一般的网页布局就是将标签贴在水池地面上,固定着,而浮动布局就是将标签浮在水面上,漂浮着。
在浮动布局中,有向左浮动,即所有的浮动标签都向左靠拢对齐,当一行空间不够时,后面的标签被挤到下一行。当然有左浮动,就会有右浮动。
1.像div等块标签,在网页显示时,无论其宽的大小,都是独占一行,如下图即使背景色为红,蓝的两个div标签的宽的和远小于屏幕的宽度,依然是出现了换行。
2.在html标签中我们通过float来设置浮动布局
float:left; 向左边浮动
float:right; 向右边浮动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>
<title>这里是标题</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript">
</script>
<style type="text/css">
*{
margin:0px;
}
#d1{
width:100px;
height:100px;
float:left;
background:blue;
}
#d2{
width:200px;
height:200px;
float:left;
background:red;
}
</style>
</head>
<body >
<div id="d1"></div>
<div id="d2"></div>
</body>
效果如图:
3.当然有了浮动后我们会发现会出现,水池上面浮动的标签会遮挡水池下面的固定标签。而这种情况有事我们不想看到的时,可以将通过将固定标签换为下一行,就不会被浮动的标签所遮挡。 在html标签中我们通过clear来设置标签上方不允许有漂浮标签。
clear:left; 不允许有向左漂浮的标签
clear:right; 不允许有向右漂浮的标签
clear:both; 不允许有任何方向漂浮的标签
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>
<title>这里是标题</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript">
</script>
<style type="text/css">
*{
margin:0px;
}
#d1{
width:100px;
height:100px;
float:left;
background:blue;
}
#d2{
width:200px;
height:200px;
float:left;
background:red;
}
#d3{
width:400px;
height:400px;
background:yellow;
}
</style>
</head>
<body >
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
</body>
效果图2如下:
在代码中再添加一个背景为黄色的div标签,且面积很大,width:400px; height:400px; 不设置clear,可以看到从效果图上可以看到,该div有一部分被漂浮的标签遮盖了。
当在id为d3的div标签的css中添加 clear:both;或者是clear:left; 不允许上方有漂浮标签时,会换行显示,效果图如下:
所以建议,在开发中如果在一行使用了浮动布局那么可以用一个空的div来隔开,浮动标签和后面的标签,从而避免出现覆盖的问题,空div标签的css可以这样写 clear:both; 而不需要声明高宽等属性。