5.1 盒模型的定义

CSS盒模型（Box Model）是CSS布局的核心，它定义了HTML元素在页面上如何显示。盒模型包括以下几个部分：

  1. 内容区域（Content Area）：这是盒子的主要内容区域，包括文本、图片或其他媒体内容。

  2. 内边距（Padding）：内容区域周围的空间，可以是透明的或有颜色的。内边距是可选的，并且不会影响盒子的最终尺寸。

  3. 边框（Border）：围绕内边距和内容区域的边缘。边框可以有不同的样式（实线、虚线、点线等），宽度和颜色。

  4. 外边距（Margin）：边框外的空间，用于在盒子之间创建距离。外边距总是透明的，并且垂直外边距可以发生折叠。

  5. 盒阴影（Box Shadow）：可选的阴影效果，可以为盒子添加视觉效果。

  6. 轮廓（Outline）：围绕盒子的边框，但不会影响盒子的布局。轮廓通常用于高亮显示或聚焦。

盒模型的尺寸计算

  • 总宽度 和 总高度：包括内容区域、内边距、边框和外边距。

CSS属性

  • width 和 height：定义内容区域的宽度和高度。
  • padding：定义内边距的大小。
  • border：定义边框的样式、宽度和颜色。
  • margin：定义外边距的大小。
  • box-shadow：定义盒子的阴影效果。
  • outline：定义盒子的轮廓。

CSS盒模型的两种模式

  1. 标准盒模型（Standard Box Model）：

    • 总宽度 = width + padding + border + margin
    • 总高度 = height + padding + border + margin

  2. IE盒模型（IE Box Model）：

    • 总宽度 = width + margin
    • 总高度 = height + margin
    • padding 和 border 被包含在 width 和 height 内。

CSS代码示例

.box {
  width: 200px;
  height: 100px;
  padding: 10px;
  border: 5px solid black;
  margin: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  outline: 2px dashed red;
}

盒模型的 box-sizing 属性

  • content-box：这是默认值，总宽度和高度包括内容区域，但不包括内边距、边框和外边距。
  • border-box：总宽度和高度包括内容区域、内边距和边框，但不包括外边距。

CSS代码示例

.box {
  box-sizing: border-box;
  width: 200px;
  height: 100px;
  padding: 10px;
  border: 5px solid black;
  margin: 20px;
}

通过理解盒模型，你可以更好地控制元素在页面上的布局和外观。

5.2 CSS元素的高度和宽度

在CSS中，元素的高度和宽度可以通过多种方式进行控制。这些属性允许你精确地设置元素的尺寸，以适应不同的布局需求。以下是一些关键点和技巧：

1. 基本属性

  • width: 设置元素的宽度。
  • height: 设置元素的高度。

2. 单位

  • 像素（px）：固定大小，无论屏幕分辨率如何，像素值总是相同的。
  • 百分比（%）：相对于父元素的宽度或高度。
  • em：相对于元素的字体大小。
  • rem：相对于根元素的字体大小。
  • vw/vh：视口宽度和高度的百分比（1vw = 1%的视口宽度，1vh = 1%的视口高度）。
  • fr：用于CSS网格布局，表示可用空间的一个分数。

3. 盒模型类型

  • content-box（默认）：宽度和高度只包括内容区域。
  • border-box：宽度和高度包括内容区域、内边距和边框。

4. 最小和最大尺寸

  • min-width/min-height：设置元素的最小尺寸。
  • max-width/max-height：设置元素的最大尺寸。

5. 视口单位

使用视口单位可以创建响应式设计，使元素的尺寸基于视口的大小。

6. 百分比尺寸

使用百分比可以创建相对于父元素尺寸的元素。

7. 响应式设计

在媒体查询中使用不同的宽度和高度值，以适应不同屏幕尺寸。

8. 盒模型的计算

  • 总宽度 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right
  • 总高度 = margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom

CSS代码示例

/* 设置固定尺寸 */
.box {
  width: 300px;
  height: 150px;
}

/* 设置百分比尺寸 */
.container {
  width: 50%;
  height: 75%;
}

/* 使用em或rem单位 */
.text {
  width: 20em;
  height: 5rem;
}

/* 使用视口单位 */
.responsive {
  width: 80vw;
  height: 60vh;
}

/* 设置最小和最大尺寸 */
.max-min-box {
  min-width: 200px;
  max-width: 500px;
  min-height: 100px;
  max-height: 300px;
}

/* 使用fr单位（CSS Grid） */
.grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}

注意事项

  • 当使用百分比单位时，确保父元素有明确的宽度和高度，否则百分比值可能不会按预期工作。
  • 使用 box-sizing: border-box; 可以简化盒模型的计算，使元素的总尺寸包括内容、内边距和边框。
  • 在响应式设计中，合理使用媒体查询和相对单位可以提高布局的灵活性。

通过这些方法，你可以精确控制元素的尺寸，创建出既美观又功能性强的网页布局。

盒模型示例 

当然，这里是一个内嵌CSS的简单示例，它将创建一个具有明确尺寸、内边距、边框和外边距的盒子：

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Box Model Example</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f4f4f4;
        }
        .box {
            width: 200px;  /* 内容区域的宽度 */
            height: 100px; /* 内容区域的高度 */
            padding: 20px; /* 内边距 */
            border: 5px solid #333; /* 边框 */
            margin: 30px; /* 外边距 */
            background-color: #fff; /* 背景颜色 */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 盒阴影 */
        }
    </style>
</head>
<body>
    <div class="box">
        <p>这是一个示例盒子，展示了CSS盒模型的不同属性。</p>
    </div>
</body>
</html>

运行图片 

解释

  1. 宽度和高度：width: 200px; 和 height: 100px; 设置了内容区域的尺寸。
  2. 内边距：padding: 20px; 在内容区域周围添加了20像素的空间。
  3. 边框：border: 5px solid #333; 添加了一个5像素宽的实心黑色边框。
  4. 外边距：margin: 30px; 在盒子周围添加了30像素的空间，使盒子与其他元素保持距离。
  5. 背景颜色：background-color: #fff; 设置了盒子的背景颜色为白色。
  6. 盒阴影：box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 为盒子添加了阴影效果，使其在页面上更加突出。

5.3 边距和边框设置 

下面是边框和样式的属性值

5.3.1 外边距设置

外边距（Margin）在CSS中用于控制元素之间的空间。它是一个透明的区域，位于元素的边框之外。外边距可以是正数，也可以是负数，这使得元素可以重叠或者有更多的空间。

外边距的基本语法：

/* 单独设置每个边的外边距 */
.element {
  margin-top: 10px;    /* 顶部外边距 */
  margin-right: 20px;  /* 右侧外边距 */
  margin-bottom: 10px; /* 底部外边距 */
  margin-left: 20px;   /* 左侧外边距 */
}

/* 简写形式，按顺时针方向设置外边距 */
.element {
  margin: 10px 20px 10px 20px; /* 上右下左 */
}

/* 简写形式，两值 */
.element {
  margin: 10px 20px; /* 上下10px，左右20px */
}

/* 简写形式，一值 */
.element {
  margin: 10px; /* 上右下左都是10px */
}

外边距的属性：

  • margin-top: 设置元素的上边距。
  • margin-right: 设置元素的右边距。
  • margin-bottom: 设置元素的下边距。
  • margin-left: 设置元素的左边距。
  • margin: 简写属性，可以同时设置所有外边距。

外边距折叠：

当两个或多个垂直外边距相遇时，它们将合并为一个外边距。合并后的外边距值等于这些外边距值中的最大值。

外边距的百分比值：

外边距可以接受百分比值，这使得外边距相对于包含块（而不是视口）的大小进行计算。

外边距的自动值（auto）：

外边距可以设置为auto，这使得浏览器自动计算外边距。这通常用于居中元素。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Margin Example</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
        }
        .container {
            width: 80%;
            background-color: #ddd;
            padding: 20px;
        }
        .element {
            width: 100px;
            height: 100px;
            background-color: #fff;
            margin: 20px auto; /* 自动外边距用于水平居中 */
        }
        .element-no-margin {
            width: 100px;
            height: 100px;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="element">有外边距的元素</div>
        <div class="element-no-margin">无边距的元素</div>
    </div>
</body>
</html>

运行图片

在这个示例中，.element 类的元素将具有20像素的外边距，并且使用margin: 20px auto;实现水平居中。.element-no-margin 类的元素没有设置外边距，所以它将紧贴在容器的边缘。.container 类的元素有一个背景颜色和内边距，用于演示外边距的效果。

5.3.2 外边距的合并 

外边距合并（Margin Collapsing）是CSS中一个特定的行为，当两个垂直外边距相遇时，它们将合并为一个外边距。合并后的外边距值等于这两个外边距值中的最大值。这通常发生在两个块级元素相邻放置时。

外边距合并的规则：

  1. 相邻兄弟元素：当两个兄弟元素的外边距相遇时，会发生外边距合并。

  2. 父子元素：如果一个元素是另一个元素的子元素，并且子元素的底部外边距与父元素的底部外边距相遇，也会发生外边距合并。

  3. 空的块级元素：如果一个块级元素没有内容（或内容都是内联元素），它的外边距可能会与相邻元素的外边距合并。

避免外边距合并：

  • 添加内边距：给子元素添加内边距可以阻止外边距合并。
  • 边框：给元素添加边框可以阻止外边距合并。
  • 行内块元素：将子元素设置为display: inline-block;可以阻止外边距合并。
  • 空内容：确保元素内有内容，即使是一个空的<div>也可以阻止外边距合并。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Margin Collapsing Example</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }
        .parent {
            background-color: #ddd;
            padding: 20px;
        }
        .child {
            background-color: #fff;
            margin-bottom: 20px;
        }
        .child:last-child {
            margin-bottom: 0;
        }
        .no-collapse {
            padding-bottom: 10px; /* 避免与兄弟元素的外边距合并 */
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child">第一个孩子</div>
        <div class="child no-collapse">第二个孩子</div>
    </div>
</body>
</html>

运行图片

在这个示例中：

  • 第一个.child元素的底部外边距会与第二个.child元素的顶部外边距合并，因为它们是相邻的兄弟元素。
  • 第二个.child元素的底部外边距不会与父元素的底部外边距合并，因为第二个.child元素有一个内边距，这阻止了外边距合并。

通过理解外边距合并的行为，你可以更好地控制元素在页面上的布局。

5.3.3 内边距设置

内边距（Padding）在CSS中用于在元素的内容与其边框之间创建空间。内边距是元素盒模型的一部分，它向内推内容，向外推边框。

内边距的基本语法：

/* 单独设置每个边的内边距 */
.element {
  padding-top: 10px;    /* 顶部内边距 */
  padding-right: 20px;  /* 右侧内边距 */
  padding-bottom: 10px; /* 底部内边距 */
  padding-left: 20px;   /* 左侧内边距 */
}

/* 简写形式，按顺时针方向设置内边距 */
.element {
  padding: 10px 20px 10px 20px; /* 上右下左 */
}

/* 简写形式，两值 */
.element {
  padding: 10px 20px; /* 上下10px，左右20px */
}

/* 简写形式，一值 */
.element {
  padding: 10px; /* 上右下左都是10px */
}

内边距的属性：

  • padding-top: 设置元素的顶部内边距。
  • padding-right: 设置元素的右侧内边距。
  • padding-bottom: 设置元素的底部内边距。
  • padding-left: 设置元素的左侧内边距。
  • padding: 简写属性，可以同时设置所有内边距。

内边距的百分比值：

内边距可以接受百分比值，这使得内边距相对于包含块（而不是视口）的大小进行计算。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Padding Example</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
        }
        .container {
            width: 80%;
            background-color: #ddd;
            padding: 20px;
            margin: 20px auto;
        }
        .element {
            width: 100px;
            height: 100px;
            background-color: #fff;
            padding: 20px;
            border: 2px solid #333;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="element">有内边距的元素</div>
    </div>
</body>
</html>

运行图片

在这个示例中：

  • .container 类的元素有一个背景颜色和内边距，用于演示内边距的效果。
  • .element 类的元素有20像素的内边距和2像素的实心黑色边框。这将使内容区域更靠近边框，而内边距则在内容和边框之间创建了空间。

通过设置内边距，你可以控制元素内容与边框之间的距离，以及元素与其他元素之间的空间。内边距是影响元素布局和设计的重要属性之一。

5.3.4 边框设置 

边框（Border）是CSS盒模型中位于内边距和外边距之间的部分。边框可以控制元素的边缘外观，包括样式、宽度、颜色等。

边框的基本语法：

/* 单独设置每个边的边框 */
.element {
  border-top-width: 1px;    /* 顶部边框宽度 */
  border-right-style: solid;  /* 右侧边框样式 */
  border-bottom-color: black; /* 底部边框颜色 */
  border-left: 2px dashed blue; /* 左侧边框的宽度、样式和颜色 */
}

/* 简写形式，设置边框的宽度、样式和颜色 */
.element {
  border-top: 1px solid black; /* 上部边框 */
  border-right: 2px dashed blue; /* 右侧边框 */
  border-bottom: 3px dotted red; /* 底部边框 */
  border-left: 1px double green; /* 左侧边框 */
}

/* 简写形式，按顺时针方向设置边框 */
.element {
  border: 1px solid black; /* 所有边的宽度、样式和颜色 */
}

边框的属性：

  • border-width: 设置边框的宽度。
  • border-style: 设置边框的样式（如实线solid、虚线dashed、点线dotted等）。
  • border-color: 设置边框的颜色。
  • border: 简写属性，可以同时设置边框的宽度、样式和颜色。

边框的样式：

  • none: 没有边框。
  • hidden: 与none相同，但用于表格时会隐藏边框。
  • dotted: 点状边框。
  • dashed: 虚线边框。
  • solid: 实线边框。
  • double: 双线边框。
  • groove: 3D凹槽边框。
  • ridge: 3D凸起边框。
  • inset: 3D凹入边框。
  • outset: 3D凸出边框。

边框的圆角：

边框还可以是圆角的，使用border-radius属性来设置。

.element {
  border-radius: 10px; /* 所有角的半径 */
  border: 1px solid black;
}
.element {
  border-top-left-radius: 10px; /* 左上角的半径 */
  border-top-right-radius: 20px; /* 右上角的半径 */
  border-bottom-right-radius: 30px; /* 右下角的半径 */
  border-bottom-left-radius: 40px; /* 左下角的半径 */
}

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Border Example</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
        }
        .element {
            width: 150px;
            height: 150px;
            background-color: #fff;
            padding: 20px;
            border: 5px solid #333;
            border-radius: 10px;
            margin: 20px;
            text-align: center;
            line-height: 150px;
        }
    </style>
</head>
<body>
    <div class="element">有边框和圆角的元素</div>
</body>
</html>

运行图片

 

在这个示例中：

  • .element 类的元素有5像素宽的实心黑色边框。
  • border-radius 属性给边框添加了圆角效果。
  • 边框内的元素通过text-align和line-height属性垂直和水平居中。

通过设置边框，你可以控制元素的外观，包括边框的宽度、样式、颜色和圆角等。边框是影响元素视觉表现的重要属性之一。

 5.3.5 新增边框属性

CSS边框属性允许你为元素定义边框的外观，包括边框的宽度、样式和颜色。以下是一些常用的边框属性：

  1. border-width: 设置边框的厚度。可以接受具体数值（如2px）、相对单位（如thin、medium、thick）。

  2. border-style: 设置边框的样式。常见的有none、solid、dashed、dotted、double、groove、ridge、inset、outset。

  3. border-color: 设置边框的颜色。可以使用颜色名（如red）、十六进制值（如#ff0000）、RGB值（如rgb(255, 0, 0)）等。

  4. border: 简写属性，可以同时设置宽度、样式和颜色，如border: 2px solid black;。

  5. border-radius: 创建圆角边框，可以接受单个值或多个值来指定每个角的半径，如border-radius: 10px;。

  6. border-image: 使用图像来创建边框，如border-image: url('border.png') 30 round;。

  7. box-sizing: 控制边框和内边距是否包含在元素的宽度和高度内，如box-sizing: border-box;。

  8. outline: 绘制于元素周围的一条线，位于边框边缘的外围，如outline: #00ff00 dotted thick;。

使用这些属性，你可以为网页元素添加丰富的视觉效果和层次感。

阴影边框示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			img{
				width: 60px;
				height: 40px;
			}
			div{
				width: 60px;
				height: 40px;
				border: 10px #00FF00 solid;
				margin: 10px;
				display: block;
				padding: 10px;
				border-top: 10px #00FF00 solid;
				border-left:  10px #0000ff dashed;
				border-right: 10px #FF0000 dotted;
				border-bottom: 10px #000000 double;
				border-radius: 30px;
				/*右偏移量 下偏移量 宽度 颜色*/
				box-shadow: -20px 10px 30px #ff00ff;
			}
		</style>
	</head>
	<body>
		<div><img src="img/美女.jpg"/></div>
		<div><img src="img/美女.jpg"/></div>

	</body>
</html>

运行图片

图片绘制边框示例 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>示例5.11</title>
		<style type="text/css">
			div{
				margin: 100px;
				border: 50px solid blue;
				border-image:url(img/border.jpg)5 10 round;
			}
		</style>
	</head>
	<body>
		<div>fgggdggfgdfwetryyjtwterjykjhgfv</div>
	</body>
</html>

运行图片

5.4 CSS元素的定位

CSS定位机制允许你精确地控制元素在页面上的位置。CSS提供了几种不同的定位方式，包括静态定位、相对定位、绝对定位、固定定位和粘性定位。

1. 静态定位（Static Positioning）

静态定位是所有元素的默认定位方式。元素的位置由其在HTML文档流中的位置决定。

.element {
  position: static;
}

2. 相对定位（Relative Positioning）

相对定位将元素相对于其正常位置进行定位。可以使用top、right、bottom和left属性来调整位置。

.element {
  position: relative;
  top: 20px;
  left: 20px;
}

3. 绝对定位（Absolute Positioning）

绝对定位将元素相对于其最近的已定位（非静态定位）祖先元素进行定位。如果没有这样的祖先元素，则相对于文档的<html>元素。

.element {
  position: absolute;
  top: 20px;
  right: 20px;
}

4. 固定定位（Fixed Positioning）

固定定位将元素相对于浏览器窗口进行定位，即使页面滚动，元素也会停留在相同的屏幕位置。

.element {
  position: fixed;
  bottom: 0;
  right: 0;
}

5. 粘性定位（Sticky Positioning）

粘性定位是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。

.element {
  position: sticky;
  top: 0;
}

定位上下文

当使用绝对定位或固定定位时，元素会形成一个新的定位上下文，这意味着其子元素的定位是相对于它而不是相对于整个文档。

z-index 属性

z-index属性决定了元素的堆叠顺序。具有更高z-index值的元素会覆盖具有较低z-index值的元素。

.element {
  position: relative;
  z-index: 1;
}

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Positioning Example</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }
        .relative {
            position: relative;
            top: 20px;
            left: 20px;
            background-color: lightblue;
            padding: 10px;
        }
        .absolute {
            position: absolute;
            top: 80px;
            right: 0;
            background-color: lightcoral;
            padding: 10px;
        }
        .fixed {
            position: fixed;
            bottom: 0;
            left: 0;
            background-color: lightgreen;
            padding: 10px;
        }
        .sticky {
            position: sticky;
            top: 0;
            background-color: lightgoldenrodyellow;
            padding: 10px;
        }
    </style>
</head>
<body>
    <div class="relative">相对定位元素</div>
    <div class="absolute">绝对定位元素</div>
    <div class="fixed">固定定位元素</div>
    <div class="sticky">粘性定位元素</div>
</body>
</html>

运行图片

在这个示例中，每种定位方式都通过不同的position属性值来展示。你可以在浏览器中查看效果，并尝试修改CSS属性来理解它们是如何影响元素定位的。

相对父盒子绝对定位

当你对一个元素使用“绝对定位”（position: absolute;），该元素将相对于其最近的已定位（即设置了 position 属性值为 relative、absolute、fixed 或 sticky）的祖先元素进行定位。如果没有这样的祖先元素，那么绝对定位元素将相对于文档的 <html> 元素，也就是相对于整个页面进行定位。

示例

以下是一个示例，演示了如何实现“相对父盒子绝对定位”：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Relative and Absolute Positioning Example</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }
        .parent {
            position: relative; /* 设置父盒子为相对定位 */
            width: 80%;
            background-color: #ddd;
            padding: 20px;
            margin: 20px auto; /* 水平居中显示 */
        }
        .absolute-child {
            position: absolute; /* 绝对定位子元素 */
            top: 20px;
            right: 20px;
            background-color: #fff;
            padding: 20px;
            border: 2px solid #333;
            width: 150px; /* 设置子元素的宽度 */
            height: 100px; /* 设置子元素的高度 */
        }
    </style>
</head>
<body>
    <div class="parent">
        这是一个相对定位的父盒子。
        <div class="absolute-child">
            绝对定位的子元素
        </div>
    </div>
</body>
</html>

运行图片

解释

  1. 父盒子：.parent 类的元素被设置为相对定位（position: relative;）。这意味着其子元素的绝对定位将基于它进行定位。

  2. 子元素：.absolute-child 类的元素被设置为绝对定位（position: absolute;）。它的位置相对于其相对定位的父元素 .parent。

  3. 定位：.absolute-child 的 top 和 right 属性分别设置为 20px，这意味着它将从父元素的顶部和右侧开始，距离父元素的边缘20像素。

通过这种方式，你可以精确地控制子元素的位置，使其在父元素内任意定位，而不受文档流的影响。这种技术在创建复杂的布局和UI组件时非常有用

5.5 CSS元素的浮动 

CSS中的浮动（Float）属性是一种布局手段，允许元素向左或向右移动，直到它的外边缘碰到包含框或另一个浮动元素的边缘。浮动元素会脱离常规文档流，但它还是会占据空间，影响其他元素的布局。

浮动的基本语法：

css

.element {
  float: left; /* 元素向左浮动 */
}
.element {
  float: right; /* 元素向右浮动 */
}
.element {
  float: none; /* 元素不浮动（默认值） */
}

浮动的属性：

  • left: 元素向左浮动。
  • right: 元素向右浮动。
  • none: 元素不浮动。
  • inherit: 从父元素继承浮动属性。

清除浮动（Clearing Floats）

当一个元素浮动后，它下方的元素也会浮动上来，这可能会导致布局问题。为了解决这个问题，可以使用clear属性来阻止元素周围有浮动。

  • clear: left;: 不允许在左侧有浮动元素。
  • clear: right;: 不允许在右侧有浮动元素。
  • clear: both;: 同时不允许左右两侧有浮动元素。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Float Example</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        .float-left {
            float: left;
            width: 100px;
            height: 100px;
            background-color: lightblue;
            margin-right: 10px; /* 在浮动元素之间添加空间 */
        }
        .float-right {
            float: right;
            width: 100px;
            height: 100px;
            background-color: lightcoral;
            margin-left: 10px; /* 在浮动元素之间添加空间 */
        }
        .clearfix::after {
            content: "";
            display: table;
            clear: both;
        }
    </style>
</head>
<body>
    <div class="float-left">左浮动元素</div>
    <div class="float-right">右浮动元素</div>
    
    <div class="clearfix"></div> <!-- 清除浮动 -->
    <p>这是一个段落，它不会被浮动元素所干扰。</p>
</body>
</html>

运行图片

在这个示例中：

  • .float-left 类的元素向左浮动。
  • .float-right 类的元素向右浮动。
  • 两个浮动元素之间通过 margin-right 和 margin-left 属性添加了一些空间。
  • .clearfix 类使用了一种称为“clearfix”的技术，它通过添加一个伪元素来清除浮动，确保段落不会被浮动元素所干扰。

浮动是早期CSS布局中常用的技术，尽管现在更常用的是Flexbox和Grid等现代布局方法，但浮动仍然在某些情况下非常有用。

综合案例 呢心美食空间

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>呢心美食空间</title>
		<style type="text/css">
			*{
				background-color: #ffff99;
			}
			a{
				color: red;
			}
			.all{
				width: 700px;
				height: 650px;
				margin: 10px auto;
				padding: 5px;
				background-image: url(img/bg1.JPG);
			}
			.banner{
				width: 700px;
				height: 70px;
			}
			.menu{
				width: 690px;
				height: 40px;
				padding: 5px;
			}
			.main{
				width: 700px;
				height: 450px;
				margin: 5px 0px;
				position: relative;
			}
			.left,.right{
				width: 150px;
				height: 440px;
				border: 1px solid #999;
				float: left;
			}
			.middle{
				width: 384px;
				height: 450px;
				margin: 0px 5px;
				float: left;
				font-size: 20px;
				font-family: "楷体";
				font-weight: 700;
				color: #0000ff;
			}
			.one{
				width: 380px;
				height: 155px;
				border: 1px solid #999;
			}
			.two{
				width: 255px;
				height: 100px;
				border: 5px double red;
				margin-top: 20px;
				margin-bottom: 20px;
				border-radius: 25px;
			}
			.three{
				width: 380px;
				height: 135px;
				border: 1px solid #999;
			}
			.bottom{
				width: 700px;
				height: 70px;
			}
		</style>
	</head>
	<body>
		<div class="all">
		<div class="banner">
		<img src="img/banner.jpg" width="700px" height="70px"/>
		</div>
		<div class="menu">
		<img src="img/menu.jpg" width="690px" height="40px"/>
		</div>
		<div class="main">
		<div class="left">
		<marquee direction="up">
		<img src="img/mm_1.jpg" width="150px" height="140px"/>
		<img src="img/mm_2.jpg" width="150px" height="140px"/>
		<img src="img/mm_3.jpg" width="150px" height="140px"/>
		</marquee>
		</div>
		<div class="middle">
		<div class="one">
		<img src="img/font.jpg" width="25px" height="25px"/>为您推荐
		<br><br>
				<img src="img/x_1.jpg" width="80px" height="40px"/>
				<img src="img/x_2.jpg" width="80px" height="40px"/>
				<img src="img/x_3.jpg" width="80px" height="40px"/>
				<img src="img/x_4.jpg" width="80px" height="40px"/>
				<img src="img/x_5.jpg" width="80px" height="40px"/>
				<img src="img/x_6.jpg" width="80px" height="40px"/>
				</div>
				<center>
				<div class="two">
				<h1>呢心美食空间</h1>
				</div>
				</center>
				<div class="three">
				<img src="img/font.jpg" width="25px" height="25px"/>团购信息
				<br>
				1. 火锅团购<br>
				2. 烧烤团购<br>
				3. 自助餐团购<br>
				4. 新春特惠
				</div>
				</div>
				<div class="right">
				<marquee direction="up">
				<img src="img/good_1.jpg" width="150px" height="140px"/>
				<img src="img/good_2.jpg" width="148px" height="140px"/>
				<img src="img/good_3.jpg" width="148px" height="140px"/>
				</marquee>
				</div>
				</div>
				<div class="bottom">
				<hr color="#0000ff"/>
				<center style="font-family:'楷体' ";>版权所有&copy;呢心美食空间<br />
				地址：江门市大学路XXX号 邮编：5000000 电话：0750-9999999</center>
				</div>
				</div>
			</body>
		</html>

运行图片

# css # 前端
Logo
MCP技术社区

欢迎加入 MCP 技术社区！与志同道合者携手前行，一同解锁 MCP 技术的无限可能！

更多推荐

cover

谷云科技iPaaS发布 MCP Server加速业务系统API 跨入 MCP 时代

avatar MCP技术社区
cover

打工人必看！Qwen3+MCPs 一键生成爆款笔记，摸鱼式运营轻松涨粉

avatar MCP技术社区
cover

MCP（Model Context Protocol）是专为LLM（大语言模型）应用设计的标准化协议

avatar MCP技术社区