简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >浮动引起的问题的解决方案和简单仿PHP网页布局

浮动引起的问题的解决方案和简单仿PHP网页布局

肖傲的博客
肖傲的博客原创
2020年06月19日 20:03:42864浏览
  • 当我们给子元素设置了浮动float:left或float:right或两者，但是没有给父元素设置高度时，就会出现父元素高度塌陷问题。
    示例如下：
    1. < !DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8" />
    5.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    6.   <title>浮动元素的高度塌陷和解决办法</title>
    7.   <style>
    8.     .container {
    9.       border: 2px solid red;
    10.     }
    11.     .item {
    12.       width: 150px;
    13.       height: 180px;
    14.     }
    15.     .item:first-of-type {
    16.       background-color: pink;
    17.     }
    18.     .item:nth-last-of-type(2) {
    19.       background-color: skyblue;
    20.     }
    21.     .item:last-of-type {
    22.       background-color: slateblue;
    23.     }
    24.     .item {
    25.       float: left;
    26.     }
    27.   </style>
    28. </head>
    29. <body>
    30.   <div class="container">
    31.     <div class="item">1</div>
    32.     <div class="item">2</div>
    33.     <div class="item">3</div>
    34.   </div>
    35. </body>
    36. </html>

一.浮动塌陷的解决方案

1.给父元素追加一个高度 （不推荐，因为不能自适应盒子的高度）

示例如下：

  1. < !DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>浮动元素的高度塌陷和解决办法</title>
  7.     <style>
  8.       .container {
  9.         border: 2px solid red;
  10.       }
  11.       .item {
  12.         width: 150px;
  13.         height: 150px;
  14.       }
  15.       .item:first-of-type {
  16.         background-color: pink;
  17.       }
  18.       .item:nth-last-of-type(2) {
  19.         background-color: skyblue;
  20.       }
  21.       .item:last-of-type {
  22.         background-color: slateblue;
  23.       }
  24.       .item {
  25.         float: left;
  26.       }
  27.       /* 给父元素增加一个高度 */
  28.       .container {
  29.         height: 150px;
  30.       }
  31.     </style>
  32.   </head>
  33.   <body>
  34.     <div class="container">
  35.       <div class="item">1</div>
  36.       <div class="item">2</div>
  37.       <div class="item">3</div>
  38.     </div>
  39.   </body>
  40. </html>

2.父元素和子元素都浮动（不推荐，容易产生代码冗余）

示例如下：

因为当代码有多个父级的时候，会有传导效应。需要每一级父元素都去添加浮动。所以也不推荐

3.设定空标签进行清除浮动（不推荐，影响渲染结果）

示例如下：

4.通过添加一个伪元素来解决

示例如下：

5.最简单的解决方案，用overflow解决。

  • overflow可以创建一个BFC（块级格式化上下文 (Block Fromatting Context)），按照块元素布局，BFC是一个独立的布局环境，其中的元素布局是不受外界的影响。说白了就是将盒子内部的元素和外部的元素进行隔离，互不影响。
    示例如下：

二.仿PHP网站首页布局

示例如下：

  1. < !DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>Document</title>
  7.     <style>
  8.       * {
  9.         margin: 0;
  10.         padding: 0;
  11.         box-sizing: border-box;
  12.       }
  13.       li {
  14.         list-style: none;
  15.       }
  16.       a {
  17.         text-decoration: none;
  18.         color: #000;
  19.       }
  20.       /* 页眉区 */
  21.       .header {
  22.         min-width: 1200px;
  23.         height: 60px;
  24.         background-color: #000;
  25.         position: relative;
  26.       }
  27.       .header .php-logo {
  28.         height: 60px;
  29.         width: 170px;
  30.         font-size: 0;
  31.         float: left;
  32.       }
  33.       .header .php-logo img {
  34.         height: 100%;
  35.         float: left;
  36.       }
  37.       .header .php-nav {
  38.         float: left;
  39.       }
  40.       .header .php-nav li {
  41.         float: left;
  42.         margin: 0 15px;
  43.       }
  44.       .header .php-nav li a {
  45.         display: block;
  46.         height: 60px;
  47.         line-height: 60px;
  48.         font-size: 15px;
  49.         color: #afafaf;
  50.       }
  51.       /* 主体 */
  52.       .container {
  53.         width: 1200px;
  54.         height: 510px;
  55.         /* 增加阴影 */
  56.         box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
  57.         /* 增加圆角 */
  58.         border-radius: 5px;
  59.         /* overflow: hidden; */
  60.         margin: 32px auto;
  61.         background-color: #f3f5f7;
  62.         /* 设置定位属性 */
  63.         position: relative;
  64.       }
  65.       /* 左模块 */
  66.       .container > .left {
  67.         width: 216px;
  68.         height: 510px;
  69.         background-color: #2b333b;
  70.         float: left;
  71.         border-radius: 10px 0 0 10px;
  72.       }
  73.       .subnav li {
  74.         height: 62;
  75.         line-height: 62px;
  76.         font-size: 18px;
  77.         padding: 0 16px;
  78.       }
  79.       .subnav ul li a {
  80.         color: rgba(255, 255, 255, 0.7);
  81.       }
  82.       .subnav ul li span {
  83.         float: right;
  84.       }
  85.       /* 右模块 */
  86.       .container > .right {
  87.         width: 984px;
  88.         height: 510px;
  89.         background-color: #ffffff;
  90.         position: absolute;
  91.         top: 0;
  92.         right: 0;
  93.       }
  94.       .container .right .r-top {
  95.         float: left;
  96.       }
  97.       .container .right .r-top li {
  98.         float: left;
  99.         margin-left: 16px;
  100.       }
  101.       .container .right .r-top li a {
  102.         display: block;
  103.         font-size: 14px;
  104.         height: 60px;
  105.         line-height: 60px;
  106.         margin-right: 30px;
  107.       }
  108.       /* 搜索模块 */
  109.       .container .right .search {
  110.         float: right;
  111.         height: 40px;
  112.         width: 260px;
  113.         margin: 10px 10px 10px 0;
  114.       }
  115.       .container .right .search input {
  116.         float: right;
  117.         width: 260px;
  118.         height: 40px;
  119.         border: none 0;
  120.         /* 圆角 */
  121.         border-radius: 2px;
  122.         font-size: 12px;
  123.         color: #757575;
  124.         background-color: #f1f0f0;
  125.       }
  126.       /* 右模块的主体部分 */
  127.       .container > .right .r-main {
  128.         height: 330px;
  129.         width: 100%;
  130.         float: left;
  131.         background: url(images/r.png);
  132.       }
  133.       /* 右模块的下部 */
  134.       .container > .right .r-bottom {
  135.         float: left;
  136.       }
  137.       .container > .right .r-bottom li {
  138.         float: left;
  139.         margin: 15px 5px;
  140.       }
  141.       .container > .right .r-bottom li img {
  142.         border-radius: 10px;
  143.       }
  144.       /* 页脚区 */
  145.       .footer {
  146.         min-width: 1200px;
  147.         height: 200px;
  148.       }
  149.       .footer > .content {
  150.         text-align: center;
  151.         line-height: 200px;
  152.         background-color: #393d49;
  153.       }
  154.     </style>
  155.   </head>
  156.   <body>
  157.     <!-- 页面 -->
  158.     <div class="header">
  159.       <div class="content">
  160.         <!-- logo模块 -->
  161.         <div class="php-logo">
  162.           <a href="#"><img src="images/logo.png" alt="" /></a>
  163.           <!-- nav模块 -->
  164.         </div>
  165.         <ul class="php-nav">
  166.           <li><a href="#">首页</a></li>
  167.           <li><a href="#">视频教程</a></li>
  168.           <li><a href="#">入门教程</a></li>
  169.           <li><a href="#">社区问答</a></li>
  170.           <li><a href="#">技术文章</a></li>
  171.           <li><a href="#">资源下载</a></li>
  172.           <li><a href="#">编程词典</a></li>
  173.           <li><a href="#">工具下载</a></li>
  174.           <li><a href="#">php培训</a></li>
  175.         </ul>
  176.       </div>
  177.     </div>
  178.     <!-- 主体 -->
  179.     <div class="container">
  180.       <div class="left">
  181.         <div class="subnav">
  182.           <ul>
  183.             <li>
  184.               <a href="#">php开发 <span>&gt;</span></a>
  185.             </li>
  186.             <li>
  187.               <a href="#">前端开发<span>&gt;</span></a>
  188.             </li>
  189.             <li>
  190.               <a href="#">服务端开发<span>&gt;</span></a>
  191.             </li>
  192.             <li>
  193.               <a href="#">移动开发<span>&gt;</span></a>
  194.             </li>
  195.             <li>
  196.               <a href="#">数据库<span>&gt;</span></a>
  197.             </li>
  198.             <li>
  199.               <a href="#">服务器运维&下载<span>&gt;</span></a>
  200.             </li>
  201.             <li>
  202.               <a href="#">在线工具箱<span>&gt;</span></a>
  203.             </li>
  204.             <li>
  205.               <a href="#">常用类库<span>&gt;</span></a>
  206.             </li>
  207.           </ul>
  208.         </div>
  209.       </div>
  210.       <div class="right">
  211.         <div class="r-top">
  212.           <ul>
  213.             <li><a href="#">PHP头条</a></li>
  214.             <li><a href="#">独孤九贱</a></li>
  215.             <li><a href="#">学习路线</a></li>
  216.             <li><a href="#">在线工具</a></li>
  217.             <li><a href="#">趣味课堂</a></li>
  218.             <li><a href="#">社区问答</a></li>
  219.             <li><a href="#">课程直播</a></li>
  220.           </ul>
  221.         </div>
  222.         <div class="search">
  223.           <input type="text" value="请输入关键搜索" />
  224.         </div>
  225.         <div class="r-main"></div>
  226.         <div class="r-bottom">
  227.           <ul>
  228.             <li>
  229.               <a href="#"><img src="images/x1.jpg" alt="" /></a>
  230.             </li>
  231.             <li>
  232.               <a href="#"><img src="images/x2.png" alt="" /></a>
  233.             </li>
  234.             <li>
  235.               <a href="#"><img src="images/x3.jpg" alt="" /></a>
  236.             </li>
  237.             <li>
  238.               <a href="#"><img src="images/x4.jpg" alt="" /></a>
  239.             </li>
  240.           </ul>
  241.         </div>
  242.       </div>
  243.     </div>
  244.     <!-- 页脚 -->
  245.     <div class="footer">
  246.       <div class="content">
  247.         <p>皖B2-20150071-9 皖公网安备 34010402701654号</p>
  248.       </div>
  249.     </div>
  250.   </body>
  251. </html>


总结：当代码量较多时容易比较乱，需要做好注释，方便自己和他人查看。写的时候最好能先画布局再写这样容易找出问题也比较容易写。不懂或者忘记的知识点可以百度。布局思路还需要加强！

上一条：Chapter3 html+css+js=导航下拉菜单下一条：表格完成购物车，表单完成用户注册表
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多