当前位置：首页 > wzjs >正文

企业建设网站没有服务器坪地网站建设代理商

wzjs 2025/9/22 8:30:13

企业建设网站没有服务器,坪地网站建设代理商,企业网站建设原则是,tk网站注册CSS3 浮动与清除浮动语法知识点及案例代码一、浮动基础浮动语法选择器 {float: left|right|none|initial|inherit; }left：元素向左浮动。right：元素向右浮动。none：默认值，元素不浮动。initial：使用默认值。inhe…

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>