CSS3 浮动与清除浮动语法知识点及案例代码
一、浮动基础
浮动语法
css
选择器 {
float: left|right|none|initial|inherit;
}left：元素向左浮动。right：元素向右浮动。none：默认值，元素不浮动。initial：使用默认值。inherit：继承父元素的浮动属性。
浮动特点
- 浮动元素会脱离文档流。
- 浮动元素会尽可能地向左或向右移动，直到遇到包含框的边缘或其他浮动元素。
- 块级元素浮动后可以设置宽度和高度。
- 浮动元素后的文本会环绕在浮动元素周围。
二、清除浮动
清除浮动语法
css
选择器 {
clear: none|left|right|both|initial|inherit;
}none：默认值，允许两侧有浮动元素。left：不允许左侧有浮动元素。right：不允许右侧有浮动元素。both：不允许两侧有浮动元素。initial：使用默认值。inherit：继承父元素的清除属性。
清除浮动方法
-
使用 clear 属性
css.clear { clear: both; } -
使用 overflow 属性
css.parent { overflow: hidden; } -
使用 clearfix 技巧
css.clearfix::after { content: ""; display: table; clear: both; }
三、案例代码
案例一：简单的浮动布局
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>浮动布局</title>
<style>
.container {
width: 600px;
margin: 0 auto;
border: 1px solid #ccc;
}
.left {
float: left;
width: 200px;
height: 200px;
background-color: #f99;
}
.right {
float: right;
width: 200px;
height: 200px;
background-color: #9f9;
}
.content {
margin: 0 210px;
height: 200px;
background-color: #99f;
}
.clear {
clear: both;
}
</style>
</head>
<body>
<div class="container">
<div class="left">左侧浮动</div>
<div class="right">右侧浮动</div>
<div class="content">中间内容</div>
<div class="clear"></div>
</div>
</body>
</html>注释：
.container：设置容器宽度和边框。.left：向左浮动，设置宽度、高度和背景色。.right：向右浮动，设置宽度、高度和背景色。.content：设置中间内容的宽度、高度和背景色。.clear：清除浮动。
案例二：清除浮动的多种方法
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>清除浮动</title>
<style>
.parent {
border: 1px solid #ccc;
margin-bottom: 20px;
}
.child {
float: left;
width: 100px;
height: 100px;
background-color: #f99;
}
/* 方法一：使用 clear 属性 */
.clear {
clear: both;
height: 0;
font-size: 0;
line-height: 0;
}
/* 方法二：使用 overflow 属性 */
.parent.overflow {
overflow: hidden;
}
/* 方法三：使用 clearfix 技巧 */
.clearfix::after {
content: "";
display: table;
clear: both;
}
</style>
</head>
<body>
<h2>方法一：使用 clear 属性</h2>
<div class="parent">
<div class="child"></div>
<div class="clear"></div>
</div>
<h2>方法二：使用 overflow 属性</h2>
<div class="parent overflow">
<div class="child"></div>
</div>
<h2>方法三：使用 clearfix 技巧</h2>
<div class="parent clearfix">
<div class="child"></div>
</div>
</body>
</html>注释：
.parent：设置父容器的边框和底部外边距。.child：向左浮动，设置宽度、高度和背景色。.clear：使用 clear 属性清除浮动。.parent.overflow：使用 overflow 属性清除浮动。.clearfix::after：使用 clearfix 技巧清除浮动。
以下是开发中常用的实际具体案例，帮助你更好地理解和应用 CSS3 浮动与清除浮动：
案例三：导航栏布局
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>导航栏布局</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.nav {
width: 100%;
height: 60px;
background-color: #333;
}
.logo {
float: left;
width: 200px;
height: 60px;
background-color: #444;
line-height: 60px;
text-align: center;
color: white;
}
.menu {
float: left;
}
.menu-item {
float: left;
width: 100px;
height: 60px;
line-height: 60px;
text-align: center;
color: white;
list-style: none;
}
.user {
float: right;
width: 150px;
height: 60px;
line-height: 60px;
text-align: center;
color: white;
}
.clearfix::after {
content: "";
display: table;
clear: both;
}
</style>
</head>
<body>
<div class="nav clearfix">
<div class="logo">LOGO</div>
<ul class="menu">
<li class="menu-item">首页</li>
<li class="menu-item">产品</li>
<li class="menu-item">服务</li>
<li class="menu-item">关于我们</li>
</ul>
<div class="user">登录/注册</div>
</div>
</body>
</html>注释：
*：重置所有元素的外边距和内边距，并设置盒模型为border-box。.nav：设置导航栏的宽度、高度和背景色。.logo：向左浮动，设置宽度、高度、背景色、行高和文本对齐方式。.menu：向左浮动，包含菜单项。.menu-item：向左浮动，设置宽度、高度、行高、文本对齐方式、颜色和列表样式。.user：向右浮动，设置宽度、高度、行高、文本对齐方式和颜色。.clearfix::after：使用 clearfix 技巧清除浮动，确保导航栏的高度正常。
案例四：产品列表展示
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>产品列表展示</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
width: 1000px;
margin: 0 auto;
}
.product-list {
overflow: hidden; /* 清除浮动 */
}
.product-item {
float: left;
width: 230px;
height: 300px;
margin: 10px;
background-color: #f9f9f9;
border: 1px solid #ddd;
border-radius: 5px;
padding: 10px;
}
.product-img {
width: 100%;
height: 200px;
background-color: #eee;
margin-bottom: 10px;
}
.product-name {
font-size: 16px;
margin-bottom: 5px;
}
.product-price {
color: #ff6000;
font-weight: bold;
}
</style>
</head>
<body>
<div class="container">
<div class="product-list">
<div class="product-item">
<div class="product-img"></div>
<div class="product-name">产品名称1</div>
<div class="product-price">¥199</div>
</div>
<div class="product-item">
<div class="product-img"></div>
<div class="product-name">产品名称2</div>
<div class="product-price">¥299</div>
</div>
<div class="product-item">
<div class="product-img"></div>
<div class="product-name">产品名称3</div>
<div class="product-price">¥399</div>
</div>
<div class="product-item">
<div class="product-img"></div>
<div class="product-name">产品名称4</div>
<div class="product-price">¥499</div>
</div>
</div>
</div>
</body>
</html>注释：
.container：设置容器的宽度和居中。.product-list：设置产品列表的清除浮动方式为overflow: hidden。.product-item：向左浮动，设置宽度、高度、外边距、背景色、边框、圆角和内边距。.product-img：设置产品图片的宽度、高度、背景色和外边距。.product-name：设置产品名称的字体大小和外边距。.product-price：设置产品价格的颜色和字体粗细。
案例五：文字环绕图片
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文字环绕图片</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
width: 800px;
margin: 0 auto;
padding: 20px;
}
.image-wrapper {
float: left;
width: 200px;
margin-right: 20px;
}
.image {
width: 100%;
height: 150px;
background-color: #eee;
}
.text {
font-size: 14px;
line-height: 1.6;
}
</style>
</head>
<body>
<div class="container">
<div class="image-wrapper">
<div class="image"></div>
</div>
<div class="text">
<p>这里是环绕图片的文字内容，图片向左浮动，文字环绕在图片右侧显示。通过浮动实现文字环绕图片的效果，使页面布局更加美观和灵活。</p>
<p>浮动的图片脱离了文档流，但文字会自动环绕在图片周围，形成自然的排版效果。在实际开发中，这种布局常用于文章、新闻等内容的展示，提升用户体验。</p>
</div>
</div>
</body>
</html>注释：
.container：设置容器的宽度、居中和内边距。.image-wrapper：向左浮动，设置宽度和右侧外边距。.image：设置图片的宽度、高度和背景色。.text：设置文字的字体大小和行高。
案例六：表单布局
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单布局</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
width: 600px;
margin: 0 auto;
padding: 20px;
}
.form-group {
margin-bottom: 20px;
}
.label {
float: left;
width: 100px;
text-align: right;
margin-right: 10px;
line-height: 30px;
}
.input-wrapper {
margin-left: 110px;
}
.input {
width: 100%;
height: 30px;
padding: 0 5px;
border: 1px solid #ddd;
border-radius: 3px;
}
.clearfix::after {
content: "";
display: table;
clear: both;
}
</style>
</head>
<body>
<div class="container">
<div class="form-group clearfix">
<label class="label">用户名：</label>
<div class="input-wrapper">
<input type="text" class="input">
</div>
</div>
<div class="form-group clearfix">
<label class="label">密码：</label>
<div class="input-wrapper">
<input type="password" class="input">
</div>
</div>
<div class="form-group clearfix">
<label class="label">邮箱：</label>
<div class="input-wrapper">
<input type="email" class="input">
</div>
</div>
</div>
</body>
</html>注释：
.container：设置容器的宽度、居中和内边距。.form-group：设置表单组的底部外边距。.label：向左浮动，设置宽度、文本对齐方式、右侧外边距和行高。.input-wrapper：设置输入框容器的左侧外边距，使输入框与标签对齐。.input：设置输入框的宽度、高度、内边距、边框和圆角。.clearfix::after：使用 clearfix 技巧清除浮动，确保表单组的高度正常。
通过以上案例，你可以看到 CSS3 浮动与清除浮动在实际开发中的广泛应用，从简单的布局到复杂的效果实现，它们都发挥着重要的作用。