devbox
菜鸟追梦旅行
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

DIV+CSS布局（一）_div元素css

作者：菜鸟追梦旅行 | 2024-03-27 16:37:37

赞

踩

div元素css

目录

1.页面布局常用标签

2.页面布局常用选择器

3.页面布局常用属性

3.1页面布局常用属性（一）

3.2页面布局常用属性（二）

3.2.1浮动属性：

3.2.2CSS清除浮动（！）

1.页面布局常用标签

  1.     <div></div>无意义块状元素标签
  2.     <span></span>无意义行内元素标签
  3.     <p></p>段落标签
  4.     <ul></ul>无序列表
  5.     <li></li>列表项
  6.     <a></a>超链接标签
  7.     <img />图片标签
  8.     <i></i>斜体标签
  9.     <b></b>粗体标签

2.页面布局常用选择器

  1. id选择器          #id
  2. 类选择器          .class
  3. 关系选择器        div p、div>p、div,p
  4. 伪类选择器        hover
  5. 结构性伪类选择器  E:after、E:before、E:nth-child()、E:first-child、E:last-child

3.页面布局常用属性

3.1页面布局常用属性（一）

  1. 字体属性：font-size
  2. 文本属性：text-decoration、text-align
  3. 首行缩进：text-indent
  4. 行高：line-height
  5. 宽高属性：width、height、min-height、max-height
  6. 背景属性：background
  7. 列表属性：list-style
  8. 字体颜色：color

3.2页面布局常用属性（二）

  1. 定位属性：position
  2. 布局属性：display
  3. 浮动属性：float、clear
  4. 盒子模型：border、margin、padding
  5. 圆角边框：border-radius
  6. 阴影：text-shadow、box-shadow

3.2.1浮动属性：

  • 浮动定位是指：

        将元素排除在普通流之外

        元素将不在页面中占据空间

        将浮动元素放置在包含框的左边或者右边

        浮动元素依旧位于包含框之内

  • 浮动元素的框可以向左或者向右移动（注意：不能向上或者向下移动，也就是没有float:top;），直到它的外边缘碰到包含框或另一个浮动框的边框为止。
  • 浮动元素的外边缘不会超过其父元素的内边缘
  • 浮动元素不会互相重叠
  • 浮动元素不会上下浮动
  • 任何元素一旦浮动，display属性将完全失效均可以设置宽高，并且不会独占一行
  • 语法: float:none/left/right; 

给父元素div和3个子元素div设置了宽高和背景色 

  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.         #box{
  9.             width: 600px;
  10.             height: 600px;
  11.             background: deeppink;
  12.         }
  13.         #box>div:first-child{
  14.             width: 200px;
  15.             height: 200px;
  16.             background: green;
  17.         }
  18.         #box>div:nth-child(2){
  19.             width: 200px;
  20.             height: 200px;
  21.             background: aqua;
  22.         }
  23.         #box>div:nth-child(3){
  24.             width: 200px;
  25.             height: 200px;
  26.             background: red;
  27.         }
  28.     </style>
  29. </head>
  30. <body>
  31.     <div id="box">
  32.         <div></div>
  33.         <div></div>
  34.         <div></div>
  35.     </div>
  36. </body>
  37. </html>

1.将绿色div设置左浮动 

  1. 将绿色div设置左浮动
  2. <!DOCTYPE html>
  3. <html lang="en">
  4.  
  5. <head>
  6.     <meta charset="UTF-8">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>浮动属性</title>
  9.     <style>
  10.         #box {
  11.             width: 600px;
  12.             height: 600px;
  13.             background: deeppink;
  14.         }
  15.  
  16.         #box>div:first-child {
  17.             width: 200px;
  18.             height: 200px;
  19.             background: green;
  20.             /* 左浮动 */
  21.             float: left;
  22.         }
  23.  
  24.         #box>div:nth-child(2) {
  25.             width: 200px;
  26.             height: 200px;
  27.             background: aqua;
  28.         }
  29.  
  30.         #box>div:nth-child(3) {
  31.             width: 200px;
  32.             height: 200px;
  33.             background: red;
  34.         }
  35.     </style>
  36. </head>
  37.  
  38. <body>
  39.     <div id="box">
  40.         <div></div>
  41.         <div></div>
  42.         <div></div>
  43.     </div>
  44. </body>
  45.  
  46. </html>

 

2.将绿色div设置右浮动 

  1. 将绿色div设置右浮动
  2. <!DOCTYPE html>
  3. <html lang="en">
  4.  
  5. <head>
  6.     <meta charset="UTF-8">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>浮动属性</title>
  9.     <style>
  10.         #box {
  11.             width: 600px;
  12.             height: 600px;
  13.             background: deeppink;
  14.         }
  15.  
  16.         #box>div:first-child {
  17.             width: 200px;
  18.             height: 200px;
  19.             background: green;
  20.             /* 右浮动 */
  21.             float: right;
  22.         }
  23.  
  24.         #box>div:nth-child(2) {
  25.             width: 200px;
  26.             height: 200px;
  27.             background: aqua;
  28.         }
  29.  
  30.         #box>div:nth-child(3) {
  31.             width: 200px;
  32.             height: 200px;
  33.             background: red;
  34.         }
  35.     </style>
  36. </head>
  37.  
  38. <body>
  39.     <div id="box">
  40.         <div>1</div>
  41.         <div>2</div>
  42.         <div>3</div>
  43.     </div>
  44. </body>
  45.  
  46. </html>

 

3.将绿色和蓝色的div设置为右浮动 

  1. 将绿色和蓝色的div设置为右浮动
  2. <!DOCTYPE html>
  3. <html lang="en">
  4.  
  5. <head>
  6.     <meta charset="UTF-8">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>浮动属性</title>
  9.     <style>
  10.         #box {
  11.             width: 600px;
  12.             height: 600px;
  13.             background: deeppink;
  14.         }
  15.  
  16.         #box>div:first-child {
  17.             width: 200px;
  18.             height: 200px;
  19.             background: green;
  20.             /* 右浮动 */
  21.             float: right;
  22.         }
  23.  
  24.         #box>div:nth-child(2) {
  25.             width: 200px;
  26.             height: 200px;
  27.             background: aqua;
  28.             /* 右浮动 */
  29.             float: right;
  30.         }
  31.  
  32.         #box>div:nth-child(3) {
  33.             width: 200px;
  34.             height: 200px;
  35.             background: red;
  36.         }
  37.     </style>
  38. </head>
  39.  
  40. <body>
  41.     <div id="box">
  42.         <div>1</div>
  43.         <div>2</div>
  44.         <div>3</div>
  45.     </div>
  46. </body>
  47.  
  48. </html>

 

1.将绿色和蓝色的div右浮动，并将红色div的宽和高设置为300px,证明浮动元素不占据位置，将元素排除在普通流之外 

  1. 将绿色和蓝色的div右浮动，并将红色div的宽和高设置为300px,证明浮动元素不占据位置
  2. <!DOCTYPE html>
  3. <html lang="en">
  4.  
  5. <head>
  6.     <meta charset="UTF-8">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>浮动属性</title>
  9.     <style>
  10.         #box {
  11.             width: 600px;
  12.             height: 600px;
  13.             background: deeppink;
  14.         }
  15.  
  16.         #box>div:first-child {
  17.             width: 200px;
  18.             height: 200px;
  19.             background: green;
  20.             /* 右浮动 */
  21.             float: right;
  22.         }
  23.  
  24.         #box>div:nth-child(2) {
  25.             width: 200px;
  26.             height: 200px;
  27.             background: aqua;
  28.             /* 右浮动 */
  29.             float: right;
  30.         }
  31.  
  32.         #box>div:nth-child(3) {
  33.             width: 300px;
  34.             height: 300px;
  35.             background: red;
  36.         }
  37.     </style>
  38. </head>
  39.  
  40. <body>
  41.     <div id="box">
  42.         <div>1</div>
  43.         <div>2</div>
  44.         <div>3</div>
  45.     </div>
  46. </body>
  47.  
  48. </html>

 

2.将绿色和蓝色的div右浮动，并将红色div的宽和高设置为300px；再将红色设置为右浮动，证明浮动元素不会互相重叠

  1. 将绿色和蓝色的div右浮动，并将红色div的宽和高设置为300px；再将红色设置为右浮动，证明浮动元素不会互相重叠
  2. <!DOCTYPE html>
  3. <html lang="en">
  4.  
  5. <head>
  6.     <meta charset="UTF-8">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>浮动属性</title>
  9.     <style>
  10.         #box {
  11.             width: 600px;
  12.             height: 600px;
  13.             background: deeppink;
  14.         }
  15.  
  16.         #box>div:first-child {
  17.             width: 200px;
  18.             height: 200px;
  19.             background: green;
  20.             /* 右浮动 */
  21.             float: right;
  22.         }
  23.  
  24.         #box>div:nth-child(2) {
  25.             width: 200px;
  26.             height: 200px;
  27.             background: aqua;
  28.             /* 右浮动 */
  29.             float: right;
  30.         }
  31.  
  32.         #box>div:nth-child(3) {
  33.             width: 300px;
  34.             height: 300px;
  35.             background: red;
  36.             /* 右浮动 */
  37.             float: right;
  38.         }
  39.     </style>
  40. </head>
  41.  
  42. <body>
  43.     <div id="box">
  44.         <div>1</div>
  45.         <div>2</div>
  46.         <div>3</div>
  47.     </div>
  48. </body>
  49.  
  50. </html>

 3.将绿色、蓝色和红色div设置右浮动

  1. 将绿色、蓝色和红色div设置右浮动
  2. <!DOCTYPE html>
  3. <html lang="en">
  4.  
  5. <head>
  6.     <meta charset="UTF-8">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>浮动属性</title>
  9.     <style>
  10.         #box {
  11.             width: 600px;
  12.             height: 600px;
  13.             background: deeppink;
  14.         }
  15.  
  16.         #box>div:first-child {
  17.             width: 200px;
  18.             height: 200px;
  19.             background: green;
  20.             /* 右浮动 */
  21.             float: right;
  22.         }
  23.  
  24.         #box>div:nth-child(2) {
  25.             width: 200px;
  26.             height: 200px;
  27.             background: aqua;
  28.             /* 右浮动 */
  29.             float: right;
  30.         }
  31.  
  32.         #box>div:nth-child(3) {
  33.             width: 200px;
  34.             height: 200px;
  35.             background: red;
  36.             /* 右浮动 */
  37.             float: right;
  38.         }
  39.     </style>
  40. </head>
  41.  
  42. <body>
  43.     <div id="box">
  44.         <div>1</div>
  45.         <div>2</div>
  46.         <div>3</div>
  47.     </div>
  48. </body>
  49.  
  50. </html>

1.span行内元素：没有宽高属性，并且不会独占一行。也就是说设置了宽高也没有效果  

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>浮动属性</title>
  8.     <style>
  9.         #box {
  10.             width: 600px;
  11.             height: 600px;
  12.             background: deeppink;
  13.         }
  14.  
  15.         #box>div:first-child {
  16.             width: 200px;
  17.             height: 200px;
  18.             background: green;
  19.             /* 右浮动 */
  20.             float: right;
  21.         }
  22.  
  23.         #box>div:nth-child(2) {
  24.             width: 200px;
  25.             height: 200px;
  26.             background: aqua;
  27.             /* 右浮动 */
  28.             float: right;
  29.         }
  30.  
  31.         #box>div:nth-child(3) {
  32.             width: 200px;
  33.             height: 200px;
  34.             background: red;
  35.             /* 右浮动 */
  36.             float: right;
  37.         }
  38.         .span1{
  39.             background: yellow;
  40.             width: 200px;
  41.             height: 200px;
  42.         }
  43.         .span2{
  44.             background: palegreen;
  45.             width: 200px;
  46.             height: 200px;
  47.         }
  48.     </style>
  49. </head>
  50.  
  51. <body>
  52.     <div id="box">
  53.         <div>1</div>
  54.         <div>2</div>
  55.         <div>3</div>
  56.     </div>
  57.     <span class="span1">我是span</span>
  58.     <span class="span2">我是span</span>
  59. </body>
  60.  
  61. </html>

2.span行内元素：没有宽高属性，并且不会独占一行。也就是说设置了宽高也没有效果 。但是任何元素一旦浮动，display属性将完全失效均可以设置宽高，并且不会独占一行

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>浮动属性</title>
  8.     <style>
  9.         #box {
  10.             width: 600px;
  11.             height: 600px;
  12.             background: deeppink;
  13.         }
  14.  
  15.         #box>div:first-child {
  16.             width: 200px;
  17.             height: 200px;
  18.             background: green;
  19.             /* 右浮动 */
  20.             float: right;
  21.         }
  22.  
  23.         #box>div:nth-child(2) {
  24.             width: 200px;
  25.             height: 200px;
  26.             background: aqua;
  27.             /* 右浮动 */
  28.             float: right;
  29.         }
  30.  
  31.         #box>div:nth-child(3) {
  32.             width: 200px;
  33.             height: 200px;
  34.             background: red;
  35.             /* 右浮动 */
  36.             float: right;
  37.         }
  38.         .span1{
  39.             background: yellow;
  40.             width: 200px;
  41.             height: 200px;
  42.             float: left;
  43.         }
  44.         .span2{
  45.             background: palegreen;
  46.             width: 200px;
  47.             height: 200px;
  48.             float: left;
  49.         }
  50.     </style>
  51. </head>
  52.  
  53. <body>
  54.     <div id="box">
  55.         <div>1</div>
  56.         <div>2</div>
  57.         <div>3</div>
  58.     </div>
  59.     <span class="span1">我是span</span>
  60.     <span class="span2">我是span</span>
  61. </body>
  62.  
  63. </html>

1.当父元素div不设置宽高且所有元素都不设置浮动时，父元素div会感知子元素的宽高，所以下面例子中，div的高为子元素的总高，又因为div是独占一行的，所以下面例子中div的宽度是满宽。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>浮动属性</title>
  8.     <style>
  9.         #box {
  10.             /* width: 600px;
  11.             height: 600px; */
  12.             background: deeppink;
  13.         }
  14.  
  15.         #box>div:first-child {
  16.             width: 200px;
  17.             height: 200px;
  18.             background: green;
  19.             /* 右浮动 */
  20.             /* float: right; */
  21.         }
  22.  
  23.         #box>div:nth-child(2) {
  24.             width: 200px;
  25.             height: 200px;
  26.             background: aqua;
  27.             /* 右浮动 */
  28.             /* float: right; */
  29.         }
  30.  
  31.         #box>div:nth-child(3) {
  32.             width: 200px;
  33.             height: 200px;
  34.             background: red;
  35.             /* 右浮动 */
  36.             /* float: right; */
  37.         }
  38.     </style>
  39. </head>
  40.  
  41. <body>
  42.     <div id="box">
  43.         <div>1</div>
  44.         <div>2</div>
  45.         <div>3</div>
  46.     </div>
  47. </body>
  48. </html>

 2.当父元素div不设置宽高，绿色盒子右浮动时

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>浮动属性</title>
  8.     <style>
  9.         #box {
  10.             /* width: 600px;
  11.             height: 600px; */
  12.             background: deeppink;
  13.         }
  14.  
  15.         #box>div:first-child {
  16.             width: 200px;
  17.             height: 200px;
  18.             background: green;
  19.             /* 右浮动 */
  20.             float: right;
  21.         }
  22.  
  23.         #box>div:nth-child(2) {
  24.             width: 200px;
  25.             height: 200px;
  26.             background: aqua;
  27.             /* 右浮动 */
  28.             /* float: right; */
  29.         }
  30.  
  31.         #box>div:nth-child(3) {
  32.             width: 200px;
  33.             height: 200px;
  34.             background: red;
  35.             /* 右浮动 */
  36.             /* float: right; */
  37.         }
  38.     </style>
  39. </head>
  40.  
  41. <body>
  42.     <div id="box">
  43.         <div>1</div>
  44.         <div>2</div>
  45.         <div>3</div>
  46.     </div>
  47. </body>
  48.  
  49. </html>

 3.当父元素div不设置宽高，绿色盒子和蓝色右浮动时

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>浮动属性</title>
  8.     <style>
  9.         #box {
  10.             /* width: 600px;
  11.             height: 600px; */
  12.             background: deeppink;
  13.         }
  14.  
  15.         #box>div:first-child {
  16.             width: 200px;
  17.             height: 200px;
  18.             background: green;
  19.             /* 右浮动 */
  20.             float: right;
  21.         }
  22.  
  23.         #box>div:nth-child(2) {
  24.             width: 200px;
  25.             height: 200px;
  26.             background: aqua;
  27.             /* 右浮动 */
  28.             float: right;
  29.         }
  30.  
  31.         #box>div:nth-child(3) {
  32.             width: 200px;
  33.             height: 200px;
  34.             background: red;
  35.             /* 右浮动 */
  36.             /* float: right; */
  37.         }
  38.     </style>
  39. </head>
  40.  
  41. <body>
  42.     <div id="box">
  43.         <div>1</div>
  44.         <div>2</div>
  45.         <div>3</div>
  46.     </div>
  47. </body>
  48.  
  49. </html>

 

  4.当父元素div不设置宽高，绿色、蓝色和红色盒子都右浮动时

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>浮动属性</title>
  8.     <style>
  9.         #box {
  10.             /* width: 600px;
  11.             height: 600px; */
  12.             background: deeppink;
  13.         }
  14.  
  15.         #box>div:first-child {
  16.             width: 200px;
  17.             height: 200px;
  18.             background: green;
  19.             /* 右浮动 */
  20.             float: right;
  21.         }
  22.  
  23.         #box>div:nth-child(2) {
  24.             width: 200px;
  25.             height: 200px;
  26.             background: aqua;
  27.             /* 右浮动 */
  28.             float: right;
  29.         }
  30.  
  31.         #box>div:nth-child(3) {
  32.             width: 200px;
  33.             height: 200px;
  34.             background: red;
  35.             /* 右浮动 */
  36.             float: right;
  37.         }
  38.     </style>
  39. </head>
  40.  
  41. <body>
  42.     <div id="box">
  43.         <div>1</div>
  44.         <div>2</div>
  45.         <div>3</div>
  46.     </div>
  47. </body>
  48.  
  49. </html>

 

5.在父元素div不设置宽高的情况下，让父元素可以感知子类的高度。可以设置overflow:hidden

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>浮动属性</title>
  8.     <style>
  9.         #box {
  10.             /* width: 600px;
  11.             height: 600px; */
  12.             background: deeppink;
  13.             /* .在父元素div不设置宽高的情况下，
  14.             让父元素可以感知子类的高度。可以设置overflow:hidden */
  15.             overflow: hidden;
  16.         }
  17.  
  18.         #box>div:first-child {
  19.             width: 200px;
  20.             height: 200px;
  21.             background: green;
  22.             /* 右浮动 */
  23.             float: right;
  24.         }
  25.  
  26.         #box>div:nth-child(2) {
  27.             width: 200px;
  28.             height: 200px;
  29.             background: aqua;
  30.             /* 右浮动 */
  31.             float: right;
  32.         }
  33.  
  34.         #box>div:nth-child(3) {
  35.             width: 200px;
  36.             height: 200px;
  37.             background: red;
  38.             /* 右浮动 */
  39.             float: right;
  40.         }
  41.     </style>
  42. </head>
  43.  
  44. <body>
  45.     <div id="box">
  46.         <div>1</div>
  47.         <div>2</div>
  48.         <div>3</div>
  49.     </div>
  50. </body>
  51.  
  52. </html>

 6.在父元素div不设置宽高的情况下，让父元素可以感知子类的高度。也可以给父元素div设置浮动。此时父元素可以感知子类高度，看不到父元素只是因为被子元素盖住了。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>浮动属性</title>
  8.     <style>
  9.         #box {
  10.             /* width: 600px;
  11.             height: 600px; */
  12.             background: deeppink;
  13.             /*下面第一个截图，是设置左浮动*/
  14.             float: left;
  15.             /*下面第一个截图，是设置右浮动*/
  16.             /*float: right;*/
  17.         }
  18.  
  19.         #box>div:first-child {
  20.             width: 200px;
  21.             height: 200px;
  22.             background: green;
  23.             /* 右浮动 */
  24.             float: right;
  25.         }
  26.  
  27.         #box>div:nth-child(2) {
  28.             width: 200px;
  29.             height: 200px;
  30.             background: aqua;
  31.             /* 右浮动 */
  32.             float: right;
  33.         }
  34.  
  35.         #box>div:nth-child(3) {
  36.             width: 200px;
  37.             height: 200px;
  38.             background: red;
  39.             /* 右浮动 */
  40.             float: right;
  41.         }
  42.     </style>
  43. </head>
  44.  
  45. <body>
  46.     <div id="box">
  47.         <div>1</div>
  48.         <div>2</div>
  49.         <div>3</div>
  50.     </div>
  51. </body>
  52.  
  53. </html>

 7.在父元素div不设置宽高的情况下，让父元素可以感知子类的高度。也可以给父元素div设置浮动。 这个例子为了对比6，再添加了第4个子元素，以证明父元素的存在。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>浮动属性</title>
  8.     <style>
  9.         #box {
  10.             /* width: 600px;
  11.             height: 600px; */
  12.             background: deeppink;
  13.             float: right;
  14.         }
  15.  
  16.         #box>div:first-child {
  17.             width: 200px;
  18.             height: 200px;
  19.             background: green;
  20.             /* 右浮动 */
  21.             float: right;
  22.         }
  23.  
  24.         #box>div:nth-child(2) {
  25.             width: 200px;
  26.             height: 200px;
  27.             background: aqua;
  28.             /* 右浮动 */
  29.             float: right;
  30.         }
  31.  
  32.         #box>div:nth-child(3) {
  33.             width: 200px;
  34.             height: 200px;
  35.             background: red;
  36.             /* 右浮动 */
  37.             float: right;
  38.         }
  39.  
  40.         #box>div:last-child{
  41.             width: 300px;
  42.             height: 300px;
  43.             background-color: blue;
  44.             float: left;
  45.         }
  46.     </style>
  47. </head>
  48.  
  49. <body>
  50.     <div id="box">
  51.         <div>1</div>
  52.         <div>2</div>
  53.         <div>3</div>
  54.         <div>4</div>
  55.     </div>
  56. </body>
  57.  
  58. </html>

 

3.2.2CSS清除浮动（！）

  • 清除浮动是为了抵消其他元素浮动对当前元素产生的影响
  • 属性：clear
  • 值：left、right、both
  • 清除浮动常用的方式：

        1.结尾处加空div标签clear:both(或在下一个元素上加clear:both)

        2.浮动元素的父级div定义overflow:hidden

        3.浮动元素的父元素定宽高

clear:both实现清除浮动

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>浮动属性</title>
  8.     <style>
  9.         #box {
  10.             /* width: 600px;
  11.             height: 600px; */
  12.             background: deeppink;
  13.             float: right;
  14.         }
  15.  
  16.         #box>div:first-child {
  17.             width: 200px;
  18.             height: 200px;
  19.             background: green;
  20.             /* 右浮动 */
  21.             float: right;
  22.         }
  23.  
  24.         #box>div:nth-child(2) {
  25.             width: 200px;
  26.             height: 200px;
  27.             background: aqua;
  28.             /* 右浮动 */
  29.             float: right;
  30.         }
  31.  
  32.         #box>div:nth-child(3) {
  33.             width: 200px;
  34.             height: 200px;
  35.             background: red;
  36.             /* 右浮动 */
  37.             float: right;
  38.         }
  39.  
  40.         #box>div:last-child{
  41.             width: 300px;
  42.             height: 300px;
  43.             background-color: blue;
  44.             /* 清除浮动-
  45.             假装其他元素没有浮动的前提下，当前元素该在哪个位置就在哪个位置 */
  46.             clear: both;
  47.         }
  48.     </style>
  49. </head>
  50.  
  51. <body>
  52.     <div id="box">
  53.         <div>1</div>
  54.         <div>2</div>
  55.         <div>3</div>
  56.         <div>4</div>
  57.     </div>
  58. </body>
  59.  
  60. </html>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/菜鸟追梦旅行/article/detail/325508
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号