wordpress零件数据库主体网站排名优化系统
CSS3 浮动与清除浮动语法知识点及案例代码
一、浮动基础
浮动语法
选择器 {float: left|right|none|initial|inherit;
}
left：元素向左浮动。right：元素向右浮动。none：默认值，元素不浮动。initial：使用默认值。inherit：继承父元素的浮动属性。
浮动特点
- 浮动元素会脱离文档流。
- 浮动元素会尽可能地向左或向右移动，直到遇到包含框的边缘或其他浮动元素。
- 块级元素浮动后可以设置宽度和高度。
- 浮动元素后的文本会环绕在浮动元素周围。
二、清除浮动
清除浮动语法
选择器 {clear: none|left|right|both|initial|inherit;
}
none：默认值，允许两侧有浮动元素。left：不允许左侧有浮动元素。right：不允许右侧有浮动元素。both：不允许两侧有浮动元素。initial：使用默认值。inherit：继承父元素的清除属性。
清除浮动方法
-
使用 clear 属性
.clear {clear: both; } -
使用 overflow 属性
.parent {overflow: hidden; } -
使用 clearfix 技巧
.clearfix::after {content: "";display: table;clear: both; }
三、案例代码
案例一：简单的浮动布局
<!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：清除浮动。
案例二：清除浮动的多种方法
<!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 浮动与清除浮动：
案例三：导航栏布局
<!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 技巧清除浮动，确保导航栏的高度正常。
案例四：产品列表展示
<!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：设置产品价格的颜色和字体粗细。
案例五：文字环绕图片
<!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：设置文字的字体大小和行高。
案例六：表单布局
<!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 浮动与清除浮动在实际开发中的广泛应用，从简单的布局到复杂的效果实现，它们都发挥着重要的作用。