search

博客列表 >html元素浮动到页面布局

html元素浮动到页面布局

lilove的博客
lilove的博客原创
2020年06月25日 13:52:501399浏览

一、元素浮动：

特点：
使用css中的 float 属性使html块元素脱离文档流，实现元素的左右位置改变，受父元素padding影响无法贴住边框。行内元素无法直接浮动。

弊端：
html元素脱离文档流后对文档流中位置后面的元素造成一系列影响，谨慎使用。

  • 案例：

  1. <!DOCTYPE html>
  2. <html lang="zh-cn">
  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.     .container1 {
  10.       width: 150px;
  11.       height: 150px;
  12.       background-color: lightsteelblue;
  13.     }
  15.     .container2 {
  16.       width: 150px;
  17.       height: 150px;
  18.       background-color: lightseagreen;
  19.       float: left;
  20.     }
  22.     .container3 {
  23.       width: 150px;
  24.       height: 150px;
  25.       background-color: lightcoral;
  26.     }
  27.   </style>
  28.   <body>
  29.     <div class="container1">盒子1</div>
  30.     <div class="container2">盒子2</div>
  31.     <div class="container3">盒子3</div>
  32.   </body>
  33. </html>

  • 运行效果：

.container2 未加入 float 属性与加入后的区别

从上图可以看出盒子2脱离了文档流，并使后面还在文档流中的盒子3往前移动了位置，被盒子2覆盖。

如果不想使浮动元素后面的元素受到影响：

在受影响元素css样式中加入 clear: left; , clear: right;

可以简写成 clear: both;

二、浮动元素高度塌陷及解决方式

  • 来看一个案例：

  1. <!DOCTYPE html>
  2. <html lang="zh-cn">
  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.     .container {
  10.       border: 2px dashed lightslategray;
  11.     }
  13.     .container1 {
  14.       width: 150px;
  15.       height: 150px;
  16.       background-color: lightsteelblue;
  17.       float: left;
  18.     }
  20.     .container2 {
  21.       width: 150px;
  22.       height: 150px;
  23.       background-color: lightseagreen;
  24.       float: left;
  25.     }
  26.   </style>
  27.   <body>
  28.     <div class="container">
  29.       <div class="container1">盒子1</div>
  30.       <div class="container2">盒子2</div>
  31.     </div>
  32.   </body>
  33. </html>

  • 运行效果：

在给盒子1与盒子2加入浮动前后

发现父元素div父元素边框变成了直线，说明父元素容器中已经不显示子元素了。

  • 那么如何修复这个问题呢？有5种方式：

  1. 给父元素添加宽高；

  2. 让父元素浮动；

  3. 在浮动元素后面添加一个空元素，css属性设置 clear: both ;
    由于新加了一个元素这种方式会影响页面dom结构；

  4. 在浮动元素后面添加一个伪元素,使用 ::before ::after ;

  5. 在父元素样式中加入 overflow: hidden; 或 overflow: auto; ，块级格式化上下文；

一般我们使用第5种方式。

前面的代码就变成了：

  1. <!DOCTYPE html>
  2. <html lang="zh-cn">
  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.     .container {
  10.       border: 2px dashed lightslategray;
  11.     }
  13.     .container1 {
  14.       width: 150px;
  15.       height: 150px;
  16.       background-color: lightsteelblue;
  17.       float: left;
  18.     }
  20.     .container2 {
  21.       width: 150px;
  22.       height: 150px;
  23.       background-color: lightseagreen;
  24.       float: left;
  25.     }
  27.     .container {
  28.       overflow: hidden;
  29.       overflow: auto;
  30.     }
  31.   </style>
  32.   <body>
  33.     <div class="container">
  34.       <div class="container1">盒子1</div>
  35.       <div class="container2">盒子2</div>
  36.     </div>
  37.   </body>
  38. </html>

运行效果：

三、常见3列布局

  • 第一种方式：使用绝对定位实现 
  1. <!DOCTYPE html>
  2. <html lang="zh-cn">
  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.     .header {
  10.       width: 100%;
  11.       height: 50px;
  12.       background-color: lightslategray;
  13.     }
  14.     .bodybox {
  15.       width: 600px;
  16.       height: 500px;
  17.       margin: 0 auto;
  18.       background-color: lightyellow;
  19.       position: relative;
  20.     }
  21.     .bodybox > .bodyleft {
  22.       width: 100px;
  23.       height: 500px;
  24.       background-color: lightskyblue;
  25.       position: absolute;
  26.       top: 0;
  27.       left: 0;
  28.     }
  29.     .bodybox > .bodymain {
  30.       width: 400px;
  31.       height: 500px;
  32.       background-color: lightgreen;
  33.       position: absolute;
  34.       top: 0;
  35.       left: 100px;
  36.     }
  37.     .bodybox > .bodyright {
  38.       width: 100px;
  39.       height: 500px;
  40.       background-color: lightpink;
  41.       position: absolute;
  42.       top: 0;
  43.       right: 0;
  44.     }
  45.     .footer {
  46.       width: 100%;
  47.       height: 50px;
  48.       background-color: magenta;
  49.     }
  50.   </style>
  51.   <body>
  52.     <div class="header"></div>
  53.     <div class="bodybox">
  54.       <div class="bodyleft"></div>
  55.       <div class="bodymain"></div>
  56.       <div class="bodyright"></div>
  57.     </div>
  58.     <div class="footer"></div>
  59.   </body>
  60. </html>
  • 第二种方式：使用元素浮动实现 
  1. <!DOCTYPE html>
  2. <html lang="zh-cn">
  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.     .header {
  10.       width: 100%;
  11.       height: 50px;
  12.       background-color: lightslategray;
  13.     }
  14.     .bodybox {
  15.       width: 600px;
  16.       margin: 0 auto;
  17.       background-color: lightyellow;
  18.       overflow: hidden;
  19.     }
  20.     .bodybox > .bodyleft {
  21.       width: 100px;
  22.       height: 500px;
  23.       background-color: lightskyblue;
  24.       float: left;
  25.     }
  26.     .bodybox > .bodymain {
  27.       width: 400px;
  28.       height: 500px;
  29.       background-color: lightgreen;
  30.       float: left;
  31.     }
  32.     .bodybox > .bodyright {
  33.       width: 100px;
  34.       height: 500px;
  35.       background-color: lightpink;
  36.       float: right;
  37.     }
  38.     .footer {
  39.       width: 100%;
  40.       height: 50px;
  41.       background-color: magenta;
  42.     }
  43.   </style>
  44.   <body>
  45.     <div class="header"></div>
  46.     <div class="bodybox">
  47.       <div class="bodyleft"></div>
  48.       <div class="bodymain"></div>
  49.       <div class="bodyright"></div>
  50.     </div>
  51.     <div class="footer"></div>
  52.   </body>
  53. </html>
  • 第三种方式：经典圣杯布局 
  1. <!DOCTYPE html>
  2. <html lang="zh-cn">
  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.     .header {
  10.       min-width: 700px;
  11.       height: 50px;
  12.       background-color: lightslategray;
  13.     }
  14.     .bodybox {
  15.       min-width: 300px;
  16.       border: 2px dashed black;
  17.       padding: 0 200px;
  18.       overflow: hidden;
  19.     }
  20.     .bodybox > * {
  21.       min-height: 500px;
  22.       float: left;
  23.     }
  24.     .bodybox > .bodyleft {
  25.       width: 200px;
  26.       margin-left: -100%;
  27.       background-color: limegreen;
  28.       position: relative;
  29.       top: 0;
  30.       left: -200px;
  31.     }
  32.     .bodybox > .bodymain {
  33.       width: 100%;
  34.       background-color: gainsboro;
  35.     }
  36.     .bodybox > .bodyright {
  37.       width: 200px;
  38.       margin-right: -200px;
  39.       background-color: lightseagreen;
  40.     }
  41.     .footer {
  42.       min-width: 700px;
  43.       height: 50px;
  44.       background-color: magenta;
  45.     }
  46.   </style>
  47.   <body>
  48.     <div class="header">头部</div>
  49.     <div class="bodybox">
  50.       <div class="bodymain">中间</div>
  51.       <div class="bodyleft">左边</div>
  52.       <div class="bodyright">右边</div>
  53.     </div>
  54.     <div class="footer">底部</div>
  55.   </body>
  56. </html>

总结：

  1. 浮动改变元素位置使用 clear: both; 修复；

  2. 高度塌陷使用 over: hidden; 修复；

  3. 网页布局最好是以 display: grid; 布局实现；

  4. 浮动与定位不能同时使用在一个元素上。

上一条：伪类与伪元素下一条：PHP大牛成长之路：CSS精灵图与阿里字体图标
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多