search

博客列表 >浮动的学习

浮动的学习

阿杰
阿杰原创
2020年06月25日 14:38:59720浏览

浮动元素高度塌陷

  1.         .container{
  2.             border: 1px dashed red;
  3.         }
  4.         .item{
  5.             width: 150px;
  6.             height: 150px;
  7.         }
  8.         .item:first-of-type{
  9.             background-color: lightgreen;
  10.         }
  11.         .item:nth-last-child(2){
  12.             background-color: lightcoral;
  13.         }
  14.         .item:last-of-type{
  15.             background-color: lightblue;
  16.         }
  18.         /* 三个子元素全部浮动 */
  19.         .item{
  20.             float: left;
  21.         }
  1.     <div class="container">
  2.         <div class="item">1</div>
  3.         <div class="item">2</div>
  4.         <div class="item">3</div>
  5.     </div>

  1. 产生的原因
    元素浮动之后从文档流中脱离（意思是它会释放它原来在文档流中占据的空间）
    浮动元素浮动之后，它后面的元素会自动填充
    浮动元素只会影响到它后面的元素布局，对前面没有影响
  2. 解决方案
    解决方案1（不可取，不能做到自适应）
    1.      /* 解决方案1：给父元素也添加一个高度 */
    2.      .container{
    3.          height: 100px;
    4.      }

    解决方案2（传导性太强，一级级父元素都要设置浮动，不可取）
    1.      /* 解决方案2：把父元素也浮动起来 */
    2.      .container{
    3.          float: left;
    4.      }

    解决方案3（添加的元素影响页面渲染，不可取）
    1.  <div class="container">
    2.      <div class="item">1</div>
    3.      <div class="item">2</div>
    4.      <div class="item">3</div>
    5.      <div class="clear"></div>
    6.  </div>
    1.      /* 解决方案3： 添加一个专用元素用于清浮动*/
    2.      .clear{
    3.          clear: both;
    4.      }

    解决方案4（主流应用）
    1.      /* 解决方案4：添加一个伪元素来解决 */
    2.      .container::after{
    3.          content: "";
    4.          display: block;
    5.          clear: both;
    6.      }

    解决方案5（添加属性overflow：hidden;）
    1.      /* 解决方案5：最简单的解决方案，用到BFC(块级格式化上下文),添加特殊属性overfl：hidden */
    2.      .container{
    3.          overflow: hidden;
    4.      }

一个三列布局

  • 使用绝对定位来完成

    1.       /* 初始化 */
    2.       *{
    3.           margin: 0;
    4.           padding: 0;
    5.           box-sizing: border-box;
    6.       }
    7.       li{
    8.           list-style: none;
    9.       }
    10.       a{
    11.           text-decoration: none;
    12.           color: #666666;
    13.       }
    15.       /* 页眉与页脚 */
    16.       .header,.footer{
    17.           height: 40px;
    18.           background-color: lightblue;
    19.       }
    20.       /* 页眉与页脚的内容区 */
    21.       .content{
    22.           width: 960px;
    23.           margin: auto;
    24.           /* background-color: #cccccc; */
    25.       }
    27.       .content ul li{
    28.           float: left;
    29.           line-height: 40px;
    30.           padding: 0 15px;
    31.       }
    32.       .content ul li:hover{
    33.           background-color: coral;
    34.       }
    36.       /* 页脚样式 */
    37.       .content p{
    38.           text-align: center;
    39.           line-height: 40px;
    40.       }
    42.       /* 主体用定位 */
    43.       .container{
    44.           width: 960px;
    45.           margin: 10px auto;
    46.           background-color: #cccccc;
    47.           min-height: 600px;
    48.           /* 转为定位元素，做为定位父级 */
    49.           position: relative;
    50.       }
    52.       .container > .left{
    53.           width: 200px;
    54.           background-color: wheat;
    55.           min-height: 600px;
    56.           position: absolute;
    57.           left: 0;
    58.           top: 0;
    59.       }
    60.       .container > .right{
    61.           width: 200px;
    62.           background-color: wheat;
    63.           min-height: 600px;
    64.           position: absolute;
    65.           top: 0;
    66.           right: 0;
    67.       }
    69.       .container > .main{
    70.           background-color: lightgreen;
    71.           min-height: 600px;
    72.           width: 540px;
    73.           position: absolute;
    74.           left: 210px;
    75.           top: 0;
    76.       }
    1.   <!-- 页眉 -->
    2.   <div class="header">
    3.       <!-- 内容区：水平居中 -->
    4.       <div class="content">
    5.           <ul>
    6.               <li><a href="">首页</a></li>
    7.               <li><a href="">618主会场</a></li>
    8.               <li><a href="">在线客服</a></li>
    9.           </ul>
    10.       </div>
    11.   </div>
    13.   <!-- 主体 -->
    14.   <div class="container">
    15.       <div class="left">左侧</div>
    16.       <div class="main">内容区</div>
    17.       <div class="right">右侧</div>
    18.   </div>
    20.   <!-- 页脚 -->
    21.   <div class="footer">
    22.       <div class="content">
    23.           <p>安徽小胖加油科技有限公司© | 备案号：粤ICP********</p>
    24.       </div>
    25.   </div>

  • 使用浮动来完成

    1.       /* 初始化 */
    2.       *{
    3.           margin: 0;
    4.           padding: 0;
    5.           box-sizing: border-box;
    6.       }
    7.       li{
    8.           list-style: none;
    9.       }
    10.       a{
    11.           text-decoration: none;
    12.           color: #666666;
    13.       }
    15.       /* 页眉与页脚 */
    16.       .header,.footer{
    17.           height: 40px;
    18.           background-color: lightblue;
    19.       }
    20.       /* 页眉与页脚的内容区 */
    21.       .content{
    22.           width: 960px;
    23.           margin: auto;
    24.           /* background-color: #cccccc; */
    25.       }
    27.       .content ul li{
    28.           float: left;
    29.           line-height: 40px;
    30.           padding: 0 15px;
    31.       }
    32.       .content ul li:hover{
    33.           background-color: coral;
    34.       }
    36.       /* 页脚样式 */
    37.       .content p{
    38.           text-align: center;
    39.           line-height: 40px;
    40.       }
    42.       /* 主体用定位 */
    43.       .container{
    44.           width: 960px;
    45.           margin: 10px auto;
    46.           /* background-color: #cccccc; */
    47.           min-height: 600px;
    48.           /* 防止浮动元素的高度塌陷*/
    49.           overflow: hidden;
    50.       }
    52.       .container > .left{
    53.           width: 200px;
    54.           background-color: wheat;
    55.           min-height: 600px;
    56.           float: left;
    57.       }
    58.       .container > .right{
    59.           width: 200px;
    60.           background-color: wheat;
    61.           min-height: 600px;
    62.           float: right;
    63.       }
    65.       .container > .main{
    66.           background-color: lightgreen;
    67.           min-height: 600px;
    68.           width: 540px;
    69.           float: left;
    70.           margin-left: 10px;
    71.       }

上一条：flex实例：PC端和移动端布局下一条：微信开发者工具Error: unable to verify the first certificate
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多