search

博客列表 >浮动及使用定位与浮动完成一个三列经典布局

浮动及使用定位与浮动完成一个三列经典布局

简行
简行原创
2020年06月19日 16:39:57535浏览

一.浮动

1.特征：

1.浮动之后会从文档流中脱离出来，即释放文档流中的位置；
2.浮动元素浮动后，它后面的元素会占据释放出来的空间大小；
3.浮动只对浮动元素后面的元素布局造成影响；
4.任何元素一旦浮动，就成为块级元素
5.浮动只能水平浮动；
6.浮动只限于内容区；

2.浮动元素高度塌原因及最终解决方案

1.原因：父级元素包不住子级元素高度；
2.解决方案，代码展示：
css:

  1.     <style>
  2.       .container {
  3.         border: 3px dashed red;
  4.       }
  5.       .item {
  6.         width: 150px;
  7.         height: 150px;
  8.       }
  9.       .item:first-of-type {
  10.         background-color: lightgreen;
  11.       }
  12.       .item:nth-last-of-type(2) {
  13.         background-color: lightcoral;
  14.       }
  15.       .item:last-of-type {
  16.         background-color: lightblue;
  17.       }
  19.       /* 将三个子元素全部浮动 */
  20.       .item {
  21.         float: left;
  22.       }
  24.       /* 解决方案: 最简单的解决方案,用到BFC(块级格式化上下文) */
  25.       .container {
  26.         /* overflow: hidden; */
  27.         overflow: auto;
  28.       }
  29.     </style>

html:

  1. <body>
  2.     <div class="container">
  3.       <div class="item">1</div>
  4.       <div class="item">2</div>
  5.       <div class="item">3</div>
  6.     </div>
  7.   </body>

二.使用定位与浮动完成一个三列经典布局

如图所示：

1.html代码部分：

  1.  <body>
  2.     <div class="header">
  3.       <div class="conter">
  4.         <ul>
  5.           <li>
  6.             <a href="">首页</a>
  7.           </li>
  8.           <li>
  9.             <a href="">618主会场</a>
  10.           </li>
  11.           <li>
  12.             <a href="">秒杀主会场</a>
  13.           </li>
  14.           <li>
  15.             <a href="">售后服务</a>
  16.           </li>
  17.         </ul>
  18.       </div>
  19.     </div>
  20.     <div class="container">
  21.       <div class="left">左侧</div>
  22.       <div class="main">中间部分</div>
  23.       <div class="right">右侧</div>
  24.     </div>
  25.     <div class="footer">
  26.       <div class="conter"><p>这是一个简单三列布局，使用定位实现</p></div>
  27.     </div>
  28.   </body>

2.CSS代码部分：

  1.   <style>
  2.     /* 初始化 */
  3.     * {
  4.       margin: 0px;
  5.       padding: 0px;
  6.       box-sizing: border-box;
  7.     }
  8.     .header,
  9.     .footer {
  10.       height: 50px;
  11.       background-color: cadetblue;
  12.     }
  13.     .conter {
  14.       width: 960px;
  15.       margin: auto;
  16.     }
  17.     .conter p {
  18.       width: 960px;
  19.       margin: auto;
  20.       /* background-color: lawngreen; */
  21.     }
  22.     li {
  23.       list-style: none;
  24.     }
  25.     a {
  26.       text-decoration: none;
  27.     }
  28.     .conter > ul > li {
  29.       line-height: 50px;
  30.       float: left;
  31.       padding: 0 15px;
  32.     }
  33.     .conter > ul > li:hover {
  34.       background-color: darkorange;
  35.     }
  36.     .footer > .conter {
  37.       line-height: 50px;
  38.       text-align: none;
  39.     }
  40.     .container {
  41.       width: 960px;
  42.       min-height: 500px;
  43.       position: relative;
  44.       margin: 15px auto;
  45.     }
  46.     .container > .left {
  47.       width: 200px;
  48.       min-height: 500px;
  49.       background-color: lightcoral;
  50.       position: absolute;
  51.       top: 0px;
  52.       left: 0px;
  53.     }
  54.     .container > .right {
  55.       width: 200px;
  56.       min-height: 500px;
  57.       background-color: lightgreen;
  58.       position: absolute;
  59.       top: 0px;
  60.       right: 0px;
  61.     }
  62.     .container > .main {
  63.       width: 530px;
  64.       min-height: 500px;
  65.       background-color: lavender;
  66.       position: absolute;
  67.       top: 0px;
  68.       left: 215px;
  69.     }
  70.   </style>
上一条：HTML布局 浮动元素高度塌陷原因及解决方案 定位 浮动实现web三列经典布局下一条：选择器的使用事例
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多