博客列表 >浮动的学习

浮动的学习

阿杰
阿杰原创
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. }
  17. /* 三个子元素全部浮动 */
  18. .item{
  19. float: left;
  20. }
  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. }
    14. /* 页眉与页脚 */
    15. .header,.footer{
    16. height: 40px;
    17. background-color: lightblue;
    18. }
    19. /* 页眉与页脚的内容区 */
    20. .content{
    21. width: 960px;
    22. margin: auto;
    23. /* background-color: #cccccc; */
    24. }
    25. .content ul li{
    26. float: left;
    27. line-height: 40px;
    28. padding: 0 15px;
    29. }
    30. .content ul li:hover{
    31. background-color: coral;
    32. }
    33. /* 页脚样式 */
    34. .content p{
    35. text-align: center;
    36. line-height: 40px;
    37. }
    38. /* 主体用定位 */
    39. .container{
    40. width: 960px;
    41. margin: 10px auto;
    42. background-color: #cccccc;
    43. min-height: 600px;
    44. /* 转为定位元素,做为定位父级 */
    45. position: relative;
    46. }
    47. .container > .left{
    48. width: 200px;
    49. background-color: wheat;
    50. min-height: 600px;
    51. position: absolute;
    52. left: 0;
    53. top: 0;
    54. }
    55. .container > .right{
    56. width: 200px;
    57. background-color: wheat;
    58. min-height: 600px;
    59. position: absolute;
    60. top: 0;
    61. right: 0;
    62. }
    63. .container > .main{
    64. background-color: lightgreen;
    65. min-height: 600px;
    66. width: 540px;
    67. position: absolute;
    68. left: 210px;
    69. top: 0;
    70. }
    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>
    12. <!-- 主体 -->
    13. <div class="container">
    14. <div class="left">左侧</div>
    15. <div class="main">内容区</div>
    16. <div class="right">右侧</div>
    17. </div>
    18. <!-- 页脚 -->
    19. <div class="footer">
    20. <div class="content">
    21. <p>安徽小胖加油科技有限公司© | 备案号:粤ICP********</p>
    22. </div>
    23. </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. }
    14. /* 页眉与页脚 */
    15. .header,.footer{
    16. height: 40px;
    17. background-color: lightblue;
    18. }
    19. /* 页眉与页脚的内容区 */
    20. .content{
    21. width: 960px;
    22. margin: auto;
    23. /* background-color: #cccccc; */
    24. }
    25. .content ul li{
    26. float: left;
    27. line-height: 40px;
    28. padding: 0 15px;
    29. }
    30. .content ul li:hover{
    31. background-color: coral;
    32. }
    33. /* 页脚样式 */
    34. .content p{
    35. text-align: center;
    36. line-height: 40px;
    37. }
    38. /* 主体用定位 */
    39. .container{
    40. width: 960px;
    41. margin: 10px auto;
    42. /* background-color: #cccccc; */
    43. min-height: 600px;
    44. /* 防止浮动元素的高度塌陷*/
    45. overflow: hidden;
    46. }
    47. .container > .left{
    48. width: 200px;
    49. background-color: wheat;
    50. min-height: 600px;
    51. float: left;
    52. }
    53. .container > .right{
    54. width: 200px;
    55. background-color: wheat;
    56. min-height: 600px;
    57. float: right;
    58. }
    59. .container > .main{
    60. background-color: lightgreen;
    61. min-height: 600px;
    62. width: 540px;
    63. float: left;
    64. margin-left: 10px;
    65. }

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议