《网页布局基础篇》—横向两列布局

主要应用属性： 
1. float属性—–使纵向排列的块级元素，横向排列 
2. margin属性—–设置两列之间的间距

先写出布局所需要的块：

<html>
<head>
<meta charset="utf-8">
<title>横向两列布局</title>
<style type="text/css">
    *{
      margin:0;
      padding:0;
      }
    #wrap{
          background-color:#00C;
          width:960px;
          margin:0 auto;  /*自动居中*/
          }
    #header{
            background-color:#FF3300;
            width:100%;
            }
    #mainbody{
            background-color:#FC0;
            width:100%;
            }
    #footer{
            background-color:#639;
            width:100%;
            }
    .left{
          width:800px;
          height:200px;
          background-color:#000;
          }
    .right{
           width:140px;
           height:300px;
           background-color:#690;
           }
</style>
</head>
<body>
    <div id="wrap">
         <div id="header">头部</div>
         <div id="mainbody">
              <div class="left"></div>
              <div class="right"></div>
         </div>
         <div id="footer">底部版权</div>
    </div>
</body>
</html>

此时未加任何浮动，效果如下图： 

 

 

此时给class为left的div增添一个向左浮动后，效果如下图：

 

 

黑色的left块此时因为设置了float:left;，脱离了标准文档流，而绿色right块此时并未设置浮动，所以绿色的块向上滑动，与header头部块组成标准文档流，绿色块的顶部与header块的底部对齐。黑色的left块发现上一个元素header块是标准流中的元素，因此黑色left块相对垂直位置不变，顶部与header块底部对齐。

结论：块总是保证自己的顶部与上一个标准文档流元素的底部对齐。

此时给绿色的right块也增添一个向左浮动，效果如下图：

 

 

此时黑色的left块和绿色的right块均设置了向左浮动，脱离了标准文档流。而紫色的footer块会自动上移，与红色的header块形成标准文档流。

（若黑块或绿色再宽一点，快达到父容器的宽度，此时紫色相较图中的位置会下移，如下图所示） 
这里写图片描述

大家此时会发现，为什么黄色的mainbody块不见了？

原因：（黄色的mainbody块并未设置height，也未填充内容。）父元素mainbody层没有设置浮动，而子元素设置了浮动，父元素层的高度没有办法得到扩展，受到了影响，此时需要清除浮动。

若此时给mainbody设置clear:both；，会发现并未有任何变化。

原因：clear方法只能影响使用清除的元素本身，不能影响其他元素。（无论本身是否填充内容或设置高度）

故，此时使用另一种方法清除：给mainbody添加overflow:hidden;，效果如下图：

这里写图片描述

横向两列布局的具体实现有两个方法：

  1. 给黑色的left块设置margin-right:20px;此时黑块、绿块的width加上margin-right之和刚好等于父元素mainbody的width。
  2. 给绿色的right块将左浮动改为右浮动。

最终横向两列布局效果如下图所示： 
这里写图片描述

注意：对于横向两列布局，法2较法1代码更优。但若需设置横向三列布局，还是需要对其中一列设置外边距。

现在我贴上全部代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="utf-8">
    <title>横向两列布局</title>
    <style type="text/css">
        *{
            margin:0;
            padding:0;
        }
        #wrap{
            background-color:#00C;
            width:960px;
            margin:0 auto;  /*自动居中*/
        }
        #header{
            background-color:#FF3300;
            width:100%;
        }
        #mainbody{
            background-color:#FC0;
            width:100%;
            overflow: hidden;
        }
        #footer{
            background-color:#639;
            width:100%;
        }
        .left{
            width:800px;
            height:200px;
            background-color:#000;
            float:left;
        }
        .right{
            width:140px;
            height:300px;
            background-color:#690;
            float:right;
        }
    </style>
</head>
<body>
<div id="wrap">
    <div id="header">头部</div>
    <div id="mainbody">
        <div class="left"></div>
        <div class="right"></div>
   </div>
    <div id="footer">底部版权</div>
</div>
</body>
</html>

https://blog.csdn.net/panlu666_pl/article/details/66480433
posted @ 2020-11-30 17:37  tomingto  阅读(727)  评论(0)    收藏  举报