html浮动布局

桃扇骨 2022-05-29 12:56 302阅读 0赞

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

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

![Center][]

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

**\[html\]**  [view plain][]  [copy][view plain]

1.  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"   
2.  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
3.  <head>  
4.      <title>这里是标题</title>  
5.      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
6.      <meta name="description" content="" />  
7.      <meta name="keywords" content="" />  
8.      <script type="text/javascript">  
9.    
10.     </script>  
11.     <style type="text/css">  
12.      \*\{  
13.         margin:0px;  
14.       \}  
15.       \#d1\{  
16.         width:100px;  
17.         height:100px;  
18.         float:left;  
19.         background:blue;  
20.       \}  
21.       \#d2\{  
22.         width:200px;  
23.         height:200px;  
24.         float:left;  
25.         background:red;  
26.       \}  
27.         
28.     </style>  
29. </head>  
30. <body >   
31.   
32.      <div id="d1"></div>  
33.      <div id="d2"></div>  
34.       
35.        
36. </body>

效果如图：

![Center 1][]

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

**\[html\]**  [view plain][]  [copy][view plain]

1.  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"   
2.  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
3.  <head>  
4.      <title>这里是标题</title>  
5.      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
6.      <meta name="description" content="" />  
7.      <meta name="keywords" content="" />  
8.      <script type="text/javascript">  
9.    
10.     </script>  
11.     <style type="text/css">  
12.      \*\{  
13.         margin:0px;  
14.       \}  
15.       \#d1\{  
16.         width:100px;  
17.         height:100px;  
18.         float:left;  
19.         background:blue;  
20.       \}  
21.        \#d2\{  
22.         width:200px;  
23.         height:200px;  
24.         float:left;  
25.         background:red;  
26.       \}  
27.         \#d3\{  
28.         width:400px;  
29.         height:400px;  
30.         background:yellow;  
31.       \}  
32.     </style>  
33. </head>  
34. <body >   
35.   
36.          <div id="d1"></div>  
37.      <div id="d2"></div>  
38.      <div id="d3"></div>  
39.        
40. </body>

效果图2如下：

![Center 2][]

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

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

![Center 3][]

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

[Center]: /images/20220529/2eebd72d11b04e2da96cb11376932f5c.png
[view plain]: https://blog.csdn.net/aozeahj/article/details/52857134?locationNum=2&fps=1#
[Center 1]: /images/20220529/c897a8684a234d51a4562329f29282ea.png
[Center 2]: /images/20220529/cda505ad5b38493086bba46c31e49cf6.png
[Center 3]: /images/20220529/289f498b06da4a41aa3183ecd8e92a90.png