search

博客列表 >PHP大牛成长之路：浮动与定位实现三列布局

PHP大牛成长之路：浮动与定位实现三列布局

周Sir-BLOG
周Sir-BLOG原创
2020年06月18日 23:33:12779浏览

1、浮动

1.1、浮动高度坍塌的原因

  • DOM结构如下：
  1.     <div class="container">
  2.       <div class="item">1</div>
  3.       <div class="item">2</div>
  4.       <div class="item">3</div>
  5.     </div>

当给3个item设置浮动后，container高度坍塌

  • 为什么呢？
  • 因为父元素的高度默认是被子元素撑开的，一旦item设置浮动后，就脱离了文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。

1.2、解决方案

  1. 解决方案1: 给父元素container也添加一个高度

    • 可行，但当子元素更改高度时父元素需同时改；不推荐；

  2. 解决方案2: 父元素container也添加浮动

    • 可行，但父元素container上面假设还有好多层级元素，需全部加上浮动（相对全浮动页面）；不推荐；

  3. 解决方案3: 添加container下添加<div style="clear:both;"></div>用于清除浮动

    • 可行，但页面多余代码给后端渲染带来不便；不推荐；

  4. 解决方案4: 给父元素container添加一个伪元素

    1.  .container::after {
    2.     content: "";
    3.     display: block;
    4.     clear: both;
    5.   }
    • 可行；推荐；

  5. 解决方案5: 最简单的解决方案,用到BFC(块级格式化上下文)

    1. overflow: hidden;
    • 可行，简单明了；强烈推荐；

2、经典3列布局示例

2.1 浮动方式实现3列布局

  1. <!DOCTYPE html>
  2. <html lang="zh-cn">
  3.   <head>
  4.     <meta charset="zh-cn" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>浮动实现三列布局</title>
  7.     <style>
  8.       /* 清除所有元素的内外边距*/
  9.       * {
  10.         margin: 0;
  11.         padding: 0;
  12.       }
  13.       /* 父盒子 */
  14.       .box {
  15.         background-color: #ccc;
  16.         width: 100%;
  17.         min-height: 600px;
  18.         overflow: hidden; /* 清除浮动*/
  19.       }
  20.       /* 左盒子 */
  21.       .box_left {
  22.         width: 160px;
  23.         height: 600px;
  24.         background-color:lightseagreen;
  25.         float: left;
  26.       }
  28.       /* 右盒子 */
  29.       .box_right {
  30.           width: 160px;
  31.         height: 600px;
  32.         background-color:lightsalmon;
  33.         float: right;
  34.       }
  37.       /* 中盒子-自适应*/
  38.       .box_main {
  39.         height: 600px;
  40.         margin-left: 160px;
  41.         margin-right: 160px;
  42.         background-color:lemonchiffon;
  43.       }
  44.     </style>
  45.   </head>
  46.   <body>
  47.     <div class="box">
  48.       <div class="box_left"></div>
  49.       <div class="box_right"></div>
  50.       <div class="box_main"></div>
  51.     </div>
  52.   </body>
  53. </html>

2.2 定位方式实现3列布局

  1. <!DOCTYPE html>
  2. <html lang="zh-cn">
  3.   <head>
  4.     <meta charset="zh-cn" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>定位实现三列布局</title>
  7.     <style>
  8.       /* 清除所有元素的内外边距*/
  9.       * {
  10.         margin: 0;
  11.         padding: 0;
  12.       }
  13.       /* 父盒子 */
  14.       .box {
  15.         background-color: #ccc;
  16.         width: 100%;
  17.         min-height: 600px;
  18.         position: relative;
  19.       }
  20.       /* 左盒子 */
  21.       .box_left {
  22.         width: 160px;
  23.         height: 600px;
  24.         background-color: lightseagreen;
  25.         position: absolute;
  26.         top:0;
  27.         left: 0;
  28.       }
  30.       /* 右盒子 */
  31.       .box_right {
  32.         width: 160px;
  33.         height: 600px;
  34.         background-color: lightsalmon;
  35.         position: absolute;
  36.         top: 0;
  37.         right: 0;
  38.       }
  40.       /* 中盒子-自适应*/
  41.       .box_main {
  42.         height: 600px;
  43.         margin-left: 160px;
  44.         margin-right: 160px;
  45.         background-color: lemonchiffon;
  46.       }
  47.     </style>
  48.   </head>
  49.   <body>
  50.     <div class="box">
  51.       <div class="box_left">左</div>
  52.       <div class="box_right">右</div>
  53.       <div class="box_main">中（自适应窗口）</div>
  54.     </div>
  55.   </body>
  56. </html>

总结：

  • 通过学习，对浮动产生的影响有了更深的理解，新的知识点overflow: hidden;简单易懂；经典3列简单布局已经能独立写出来，有空需要实践更复杂的案例，遇到问题，才明白自己什么地方理解不足。
上一条：代码编辑器与PHPSTUDY的安装与配置过程（前端第一课）下一条：06 盒（或框）的属性、位置
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多