Appearance
浮动布局（传统布局，必学基础）
11.1 浮动的定义
什么是浮动？
浮动（float）是CSS中的一种布局方式，可以让元素脱离标准流，向左或向右移动，直到遇到父元素的边界或其他浮动元素。
浮动的特点
- 元素脱离标准流
- 元素向左或向右移动
- 其他内容会环绕浮动元素
11.2 浮动属性（float）
语法
css
元素 {
float: 浮动方向;
}常用值
- left：左浮动
- right：右浮动
- none：不浮动（默认值）
示例
css
/* 左浮动 */
.float-left {
float: left;
width: 200px;
margin-right: 20px;
}
/* 右浮动 */
.float-right {
float: right;
width: 200px;
margin-left: 20px;
}11.3 浮动的作用
实现元素横向排列
css
.nav-item {
float: left;
padding: 10px 20px;
}图片环绕文字
css
.float-image {
float: left;
margin: 0 20px 20px 0;
}11.4 新手高频坑：浮动塌陷
问题描述
当父元素包含浮动子元素时，父元素的高度会塌陷为0。
原因
浮动元素脱离标准流，父元素无法感知浮动子元素的高度。
示例
html
<div class="parent">
<div class="float-child">浮动元素</div>
</div>css
.parent {
border: 2px solid #333;
/* 父元素高度为0 */
}
.float-child {
float: left;
width: 200px;
height: 100px;
background-color: #e3f2fd;
}11.5 清除浮动的4种方法
方法1：额外标签法
在浮动元素后面添加一个空标签，并设置clear属性。
html
<div class="parent">
<div class="float-child">浮动元素</div>
<div class="clear"></div>
</div>css
.clear {
clear: both;
}方法2：伪元素清除法（推荐）
使用::after伪元素清除浮动。
css
.clearfix::after {
content: "";
display: block;
clear: both;
}方法3：overflow法
给父元素设置overflow属性。
css
.parent {
overflow: hidden; /* 或 auto */
}方法4：双伪元素法
使用::before和::after双伪元素。
css
.clearfix::before,
.clearfix::after {
content: "";
display: table;
}
.clearfix::after {
clear: both;
}11.6 实战：用浮动布局导航栏、图文混排页面
实战目标
使用浮动布局创建导航栏和图文混排页面。
实战步骤
- 创建HTML文件：
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS浮动布局实战</title>
<style>
/* 在这里添加CSS样式 */
</style>
</head>
<body>
<div class="container">
<h1>CSS浮动布局实战</h1>
<!-- 浮动导航栏 -->
<nav class="navbar clearfix">
<div class="nav-item">首页</div>
<div class="nav-item">产品</div>
<div class="nav-item">服务</div>
<div class="nav-item">关于</div>
<div class="nav-item">联系</div>
</nav>
<!-- 图文混排 -->
<article class="article">
<img src="https://via.placeholder.com/200x150" alt="示例图片" class="float-image">
<h2>文章标题</h2>
<p>这是一段示例文字。浮动布局可以实现图文混排效果，图片浮动在左侧，文字环绕在图片周围。这是CSS中传统的布局方式，虽然现在有了Flexbox和Grid布局，但了解浮动布局仍然很重要。</p>
<p>浮动元素会脱离标准流，向左或向右移动，直到遇到父元素的边界或其他浮动元素。其他内容会环绕浮动元素排列。</p>
</article>
<!-- 多列布局 -->
<div class="multi-column clearfix">
<div class="column">列1内容</div>
<div class="column">列2内容</div>
<div class="column">列3内容</div>
</div>
</div>
</body>
</html>- 添加CSS样式：
css
/* 重置样式 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Microsoft YaHei", Arial, sans-serif;
background-color: #f5f5f5;
padding: 50px 20px;
}
.container {
max-width: 800px;
margin: 0 auto;
}
h1 {
text-align: center;
color: #333;
margin-bottom: 40px;
}
/* 清除浮动 */
.clearfix::after {
content: "";
display: block;
clear: both;
}
/* 导航栏样式 */
.navbar {
background-color: #333;
margin-bottom: 40px;
border-radius: 8px;
}
.nav-item {
float: left;
padding: 15px 25px;
color: white;
cursor: pointer;
transition: background-color 0.3s;
}
.nav-item:hover {
background-color: #555;
}
/* 图文混排样式 */
.article {
background-color: white;
padding: 30px;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
margin-bottom: 40px;
}
.float-image {
float: left;
margin: 0 20px 20px 0;
border-radius: 8px;
}
.article h2 {
color: #333;
margin-bottom: 15px;
}
.article p {
color: #666;
line-height: 1.6;
margin-bottom: 15px;
}
/* 多列布局样式 */
.multi-column {
background-color: white;
padding: 30px;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.column {
float: left;
width: 30%;
margin-right: 5%;
padding: 20px;
background-color: #e3f2fd;
border-radius: 8px;
text-align: center;
}
.column:last-child {
margin-right: 0;
}- 运行页面：在浏览器中打开文件，观察效果
预期效果
- 导航栏：使用浮动实现水平排列
- 图文混排：图片左浮动，文字环绕
- 多列布局：三列等宽布局