html浮动布局 - 爱码网

浮动布局：
之所以要使用到浮动布局，只要是像div等块标签，在网页显示时，无论其宽的大小，都是独占一行。而在网页布局中，我们常常需要将两个或者是多个div并排放置。由于div独占一行，并排是不可能实现的。所以我们需要采用浮动布局，所谓的浮动布局，可以这么来理解，将网页当作游泳池，游泳池分为水底和水面，一般的网页布局就是将标签贴在水池地面上，固定着，而浮动布局就是将标签浮在水面上，漂浮着。
在浮动布局中，有向左浮动，即所有的浮动标签都向左靠拢对齐，当一行空间不够时，后面的标签被挤到下一行。当然有左浮动，就会有右浮动。

1.像div等块标签，在网页显示时，无论其宽的大小，都是独占一行，如下图即使背景色为红，蓝的两个div标签的宽的和远小于屏幕的宽度，依然是出现了换行。

html浮动布局

2.在html标签中我们通过float来设置浮动布局
float:left; 向左边浮动
float:right; 向右边浮动

[html]view plain copy
<!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>  

效果如图：

html浮动布局

3.当然有了浮动后我们会发现会出现，水池上面浮动的标签会遮挡水池下面的固定标签。而这种情况有事我们不想看到的时，可以将通过将固定标签换为下一行，就不会被浮动的标签所遮挡。在html标签中我们通过clear来设置标签上方不允许有漂浮标签。
clear:left; 不允许有向左漂浮的标签
clear:right; 不允许有向右漂浮的标签
clear:both; 不允许有任何方向漂浮的标签

[html]view plain copy
<!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如下：

html浮动布局

在代码中再添加一个背景为黄色的div标签，且面积很大，width:400px; height:400px; 不设置clear，可以看到从效果图上可以看到，该div有一部分被漂浮的标签遮盖了。

当在id为d3的div标签的css中添加 clear:both;或者是clear:left; 不允许上方有漂浮标签时，会换行显示，效果图如下：

html浮动布局

所以建议，在开发中如果在一行使用了浮动布局那么可以用一个空的div来隔开，浮动标签和后面的标签，从而避免出现覆盖的问题，空div标签的css可以这样写 clear:both; 而不需要声明高宽等属性。

html浮动布局

2.在html标签中我们通过float来设置浮动布局
float:left; 向左边浮动
float:right; 向右边浮动

[html]view plain copy
<!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>  

效果如图：

html浮动布局

[html]view plain copy
<!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如下：

html浮动布局

当在id为d3的div标签的css中添加 clear:both;或者是clear:left; 不允许上方有漂浮标签时，会换行显示，效果图如下：

html浮动布局