html浮动布局

最新推荐文章于 2024-04-26 22:21:10 发布

aozeahj

最新推荐文章于 2024-04-26 22:21:10 发布

阅读量1.8w

点赞数 12

分类专栏： html

本文链接：https://blog.csdn.net/aozeahj/article/details/52857134

版权

html 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

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; 而不需要声明高宽等属性。

aozeahj

关注

12
点赞
踩
29

收藏

觉得还不错? 一键收藏
0
评论
html浮动布局

html浮动布局浮动布局：之所以要使用到浮动布局，只要是像div等块标签，在网页显示时，无论其宽的大小，都是独占一行。而在网页布局中，我们常常需要将两个或者是多个div并排放置。由于div独占一行，并排是不可能实现的。所以我们需要采用浮动布局，所谓的浮动布局，可以这么来理解，将网页当作游泳池，游泳池分为水底和水面，一般的网页布局就是将标签贴在水池地面上，固定着，而浮动布局就
复制链接

扫一扫