| html浮动布局 | 您所在的位置：网站首页 › html浮动标签 › html浮动布局 |
html浮动布局
|
html浮动布局 浮动布局： 之所以要使用到浮动布局，只要是像div等块标签，在网页显示时，无论其宽的大小，都是独占一行。而在网页布局中，我们常常需要将两个或者是多个div并排放置。由于div独占一行，并排是不可能实现的。所以我们需要采用浮动布局，所谓的浮动布局，可以这么来理解，将网页当作游泳池，游泳池分为水底和水面，一般的网页布局就是将标签贴在水池地面上，固定着，而浮动布局就是将标签浮在水面上，漂浮着。 在浮动布局中，有向左浮动，即所有的浮动标签都向左靠拢对齐，当一行空间不够时，后面的标签被挤到下一行。当然有左浮动，就会有右浮动。 1.像div等块标签，在网页显示时，无论其宽的大小，都是独占一行，如下图即使背景色为红，蓝的两个div标签的宽的和远小于屏幕的宽度，依然是出现了换行。
2.在html标签中我们通过float来设置浮动布局 float:left; 向左边浮动 float:right; 向右边浮动 这里是标题 *{ margin:0px; } #d1{ width:100px; height:100px; float:left; background:blue; } #d2{ width:200px; height:200px; float:left; background:red; } 效果如图：
3.当然有了浮动后我们会发现会出现，水池上面浮动的标签会遮挡水池下面的固定标签。而这种情况有事我们不想看到的时，可以将通过将固定标签换为下一行，就不会被浮动的标签所遮挡。 在html标签中我们通过clear来设置标签上方不允许有漂浮标签。 clear:left; 不允许有向左漂浮的标签 clear:right; 不允许有向右漂浮的标签 clear:both; 不允许有任何方向漂浮的标签 这里是标题 *{ 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; } 效果图2如下：
在代码中再添加一个背景为黄色的div标签，且面积很大，width:400px; height:400px; 不设置clear，可以看到从效果图上可以看到，该div有一部分被漂浮的标签遮盖了。
当在id为d3的div标签的css中添加 clear:both;或者是clear:left; 不允许上方有漂浮标签时，会换行显示，效果图如下：
所以建议，在开发中如果在一行使用了浮动布局那么可以用一个空的div来隔开，浮动标签和后面的标签，从而避免出现覆盖的问题，空div标签的css可以这样写 clear:both; 而不需要声明高宽等属性。
|
【本文地址】