简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 浮动元素高度塌陷产生的原因与解决方案/定位与浮动完成一个三列经典布局
Blogger Information
Blog 17
fans 1
comment 0
visits 14752
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
浮动元素高度塌陷产生的原因与解决方案/定位与浮动完成一个三列经典布局
邱世家的博客
Original
910 people have browsed it

浮动元素高度塌陷产生的原因与解决方案

  • 了解概念
** 常用 特点
行内元素 span.img、big、strong、u、button 相邻的行内元素不换行，设置宽高无效，只有水平方向的padding和margin属性可以设置
块级元素 div,p、h1~h6、table、ul、li、ol.header、section、aside、footer 独占一行能够设置宽高，margin和padding对上下左右四个方向设置均有效。
行内块元素 <img>/<input> 元素排列在一行，不会自动换行，可设置宽度和高度以及外边距和内边距的所有样式
display 下面解读他的属性值 标签显示模式转换
display display:inline 转为行内元素
display display:block 转为块元素
display display:inlinne-block; 转为行内块元素

- 注意 ：任何元素，一旦浮动都自动转为块级元素

  • 实例演示：.box下面的元素浮动之后会脱离原来的位置，通过overflow: hidden;解决
  • 脱离文档流：
    1. <style>
    2.   .box {
    3.     border: 5px solid red;
    4.   }
    5.   .box1 {
    6.     width: 200px;
    7.     height: 200px;
    8.     background-color: royalblue;
    9.   }
    10.   .box2 {
    11.     width: 200px;
    12.     height: 200px;
    13.     background-color: chocolate;
    14.   }
    15.   .box3 {
    16.     width: 200px;
    17.     height: 200px;
    18.     background-color: lightgreen;
    19.   }
    20.   /* 当box下面的所有元素浮动之后，
    21.     发现父级元素包裹不住下面的子元素了，产生了塌陷
    22.     因为元素进行浮动之后就会脱离原来文档流的位置，由下面的元素补充 */
    23.   .box > * {
    24.     float: left;
    25.   }
    26.   /* 解决方案 */
    27.   /* 一：给父级添加高度，但是如果子元素的宽高发生变化 需要重新修改父级的高度，不行
    28.     二： 让父级也浮动，可以实现重新包裹但是如果再嵌套一个div，又乱套了，也不行
    29.     三：使用clear:both清除浮动; 给元素内部浮动元素添加一同级空的标签，给该空标签设置clear:both
    30.     后期会造成代码冗余 */
    31.   /* 通过添加伪元素解决 */
    32.   /* .box::after {
    33.     content: ;
    34.     display: block;
    35.     clear: both;
    36.   } */
    37.   /* 终极大招以后就用它 用到BFC(块级格式化上下文) */
    38.   .box {
    39.     overflow: hidden;
    40.   }
    41. </style>
    42. <body>
    43.   <div class="box">
    44.     <div class="box1">box1</div>
    45.     <div class="box2">box2</div>
    46.     <div class="box3">box3</div>
    47.   </div>
    48. </body>
  • 通过overflow: hidden; —最简单实用办法

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

  • 了解感念：三列经典布局什么样

  • html部分
  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.       @import url(threecolumns.css);
  9.     </style>
  10.   </head>
  11.   <body>
  12.     <div class="header">
  13.       <!-- 页眉内容区居中显示 -->
  14.       <div class="content">
  15.         <ul>
  16.           <li><a href="">首页</a></li>
  17.           <li><a href="">iphone抢购</a></li>
  18.           <li><a href="">你买了吗</a></li>
  19.           <li><a href="">为什么抢购iphone</a></li>
  20.           <li><a href="">买华为小米吧</a></li>
  21.           <li><a href="">你疯了吗</a></li>
  22.           <li><a href="">iphone抢购</a></li>
  23.           <li><a href="">你买了吗</a></li>
  24.         </ul>
  25.       </div>
  26.     </div>
  27.     <div class="container">
  28.       中间
  29.       <div class="left">左侧</div>
  30.       <div class="middle">内容区</div>
  31.       <div class="right">右侧</div>
  32.     </div>
  33.     <div class="footer">
  34.       <div class="content">
  35.         <p>学员丘佳第一次练习经典三列布局©|实现方法:绝对定位</p>
  36.       </div>
  37.     </div>
  38.   </body>
  39. </html>

  • css部分：在hetml中通过<style>@import url(threecolumns.css);</style>引入
  1. /* 页面初始化 */
  2. * {
  3.   margin: 0;
  4.   padding: 0;
  5.   box-sizing: border-box;
  6. }
  7. a {
  8.   text-decoration: none;
  9.   color: #000;
  10. }
  11. li {
  12.   list-style: none;
  13. }
  14. /* 页眉页脚的样式 */
  15. .header,
  16. .footer {
  17.   height: 40px;
  18.   background-color: aquamarine;
  19. }
  20. /* 页眉页脚内容区 */
  21. .content {
  22.   width: 960px;
  23.   /* 块级元素居中 用 margin: auto;*/
  24.   margin: auto;
  25. }
  26. /* 页眉中导航样式 */
  27. .content ul li {
  28.   float: left;
  29.   line-height: 40px;
  30.   padding: 0 20px;
  31. }
  32. /* 鼠标悬停样式 */
  33. .content ul li:hover {
  34.   font-size: 1.3rem;
  35.   background-color: cornsilk;
  36. }
  37. /* 页脚样式 */
  38. .content p {
  39.   text-align: center;
  40.   line-height: 40px;
  41. }
  42. /* 主体用定位 */
  43. .container {
  44.   width: 960px;
  45.   /* 此处margin 原来设置的auto，后面加的13px，为了内容区和页眉页脚的间距 */
  46.   margin: 13px auto;
  47.   /* 设置背景色是为了看起来更直观的布局 */
  48.   /* background-color: cyan; */
  49.   /* 最小高度即使没有内容 也能撑开 */
  50.   min-height: 600px;
  51.   /* 转为定位元素，做定位父级 下面的三列用绝对定位*/
  52.   position: relative;
  53. }
  54. .container > .left {
  55.   width: 200px;
  56.   min-height: 600px;
  57.   position: absolute;
  58.   top: 0;
  59.   left: 0;
  60.   background-color: chocolate;
  61. }
  62. .container > .right {
  63.   width: 200px;
  64.   min-height: 600px;
  65.   position: absolute;
  66.   top: 0;
  67.   right: 0;
  68.   background-color: coral;
  69. }
  70. .container > .middle {
  71.   min-height: 600px;
  72.   /* 页面宽960左右两侧各占200，中间剩下560，为了让中间和左右两侧各有10px间距，
  73.   从左上角开始绝对定位top为0，但是left为210 这样设置左右各有10px间距*/
  74.   width: 540px;
  75.   background-color: cornflowerblue;
  76.   position: absolute;
  77.   top: 0;
  78.   left: 210px;
  79. }

浮动实现经典三列

  • html部分基本一样，直接上全部代码
  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.   </head>
  8.   <style>
  9.       /* 初始化 */
  10.       *{
  11.           margin: 0;
  12.           padding: 0;
  13.           box-sizing: border-box;
  14.       }
  15.       a{
  16.           text-decoration: none;
  17.           color: coral;
  18.       }
  19.       li{
  20.           list-style: none;
  21.       }
  22.       .header,.footer{
  23.           height: 40px;
  24.           background-color: cyan;
  25.       }
  26.       .center{
  27.           /* 块级元素居中要给宽度否则无法生效 */
  28.         width: 1000px;  
  29.         margin: auto;
  30.       }
  31.       .center ul li {
  32.           float: left;
  33.           padding: 0 10px;
  34.           line-height: 40px;
  35.       }
  36.       .center p {
  37.           line-height: 40px;
  38.           text-align: center;
  39.       }
  40.       .container{
  41.           width: 1000px;
  42.           margin:10px auto;
  43.           min-height: 600px;
  44.           overflow: hidden;
  46.       }
  47.       .container > .left{
  48.           width: 200px;
  49.           min-height: 600px;
  50.           background-color: darkcyan;
  51.           /* 左右两侧在容器container（设好了宽高）中，左浮动就是在左边了，所以看起来没动，其实动了 */
  52.           float: left;
  53.       }
  54.       .container > .right{
  55.           width: 200px;
  56.           min-height: 600px;
  57.           background-color: cornflowerblue;
  58.           /* 左右两侧在容器container（设好了宽高）中，右浮动肯定是到最右边*/
  59.           float: right;
  60.       }
  61.       .container > .middle{
  62.           width: 580px;
  63.           min-height: 600px;
  64.           background-color: darkkhaki;
  65.           float: left;
  66.           margin-left: 10px;
  67.       }
  69.   </style>
  70.   <body>
  71.     <div class="header">
  72.         <div class="center">
  73.           <ul>
  74.               <li><a href="">首页</a></li>
  75.               <li><a href="">用定位实现</a></li>
  76.               <li><a href="">熟悉布局流程</a></li>
  77.               <li><a href="">页眉中有导航栏</a></li>
  78.               <li><a href="">导航栏用ul+li</a></li>
  79.               <li><a href="">中间分三列</a></li>
  80.               <li><a href="">页脚footer</a></l>
  81.           </ul>
  82.         </div>
  83.     </div>
  84.     <div class="container">
  85.         <div class="left">左边</div>
  86.         <div class="middle">中间</div>
  87.         <div class="right">右边</div>
  88.     </div>
  89.     <div class="footer">
  90.         <div class="center">
  91.             <p>学员丘佳第二次练习经典三列布局©|实现方法:浮动</p>
  92.         </div>
  93.     </div>
  94.   </body>
  95. </html>

问题：

  • 做出来之后尝试了一下让中间右浮动：

    1. .container > .left{
    2.         width: 200px;
    3.         min-height: 600px;
    4.         background-color: darkcyan;
    5.         /* 左右两侧在容器container（设好了宽高）中，左浮动就是在左边了，所以看起来没动，其实动了 */
    6.         float: left;
    7.     }
    8.     .container > .right{
    9.         width: 200px;
    10.         min-height: 600px;
    11.         background-color: cornflowerblue;
    12.         /* 左右两侧在容器container（设好了宽高）中，右浮动肯定是到最右边*/
    13.         float: right;
    14.     }
    15.     .container > .middle{
    16.         width: 580px;
    17.         min-height: 600px;
    18.         background-color: darkkhaki;
    19.         float: right;
    21.     }
  • 显示结果，布局就变了。

结论：麻烦老师批作业的时候给看下我想的对不对

  • 从代码中看到，三个div的顺序先left，然后middle 最后right
    我们左边div做左浮动 右边div做右浮动 ，中间div做左浮动 ，布局没问题
    因为当前三个div都脱离了文档流，左浮动找左浮动 。
  • 但是我把中间div设置右浮动 ，出现了右边的div紧挨着中间的div从右边排列。布局混乱导致这样原因是因为：html显示顺序，写在前面的先显示。所以中间的div会在最右边，右边的div会紧接着中间的div排列。
Correcting teacher：WJWJ

Correction status：qualified

Teacher's comments：写的很好很仔细，也爱思考！你说的是对的，跟顺序有关的
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！