7.1 属性 float
通过使用 float 和 clear 属性，浮动元素是创建复杂网页设计布局的早期方法之一。尽管现代的方法，如 Flexbox 和 Grid，通常更受欢迎，但了解 float 和 clear 的使用仍然很重要，尤其是在处理过时项目或理解 CSS 基础时。
属性 float
float 属性可以让元素“浮动”到左边或右边，并让文本及其他元素环绕它。这个属性对创建带有列布局和图片环绕文本的设计特别有用。
语法：
.element {
float: left; /* 或 right */
}
属性 float 的值：
left: 元素浮动在左边，后续元素环绕在右边right: 元素浮动在右边，后续元素环绕在左边none: 默认值，元素不浮动inherit: 从父元素继承值
使用 float 的例子：
CSS
.float-left {
float: left;
width: 200px;
height: 200px;
background-color: lightblue;
}
.float-right {
float: right;
width: 200px;
height: 200px;
background-color: lightgreen;
}
.content {
background-color: lightgrey;
padding: 10px;
}
HTML
<div class="float-left">Left Float</div>
<div class="float-right">Right Float</div>
<div class="content">
<p>This is some content that will wrap around the floated elements. The left floated element will be placed to the left, and the right floated element will be placed to the right.</p>
</div>
7.2 属性 clear
clear 属性用于控制浮动元素的环绕行为。它可以防止元素被浮动元素从某个方向环绕。
语法：
.element {
clear: left; /* 或 right */
}
属性 clear 的值：
left: 元素不会被左边浮动right: 元素不会被右边浮动both: 元素不会被左右两边浮动none: 默认值，元素会被两边浮动
使用 clear 的例子：
CSS
.float-left {
float: left;
width: 200px;
height: 200px;
background-color: lightblue;
}
.float-right {
float: right;
width: 200px;
height: 200px;
background-color: lightgreen;
}
.clear {
clear: both;
background-color: lightcoral;
padding: 10px;
}
.content {
background-color: lightgrey;
padding: 10px;
}
HTML
<div class="float-left">Left Float</div>
<div class="float-right">Right Float</div>
<div class="clear">Cleared Element</div>
<div class="content">
<p>This content will not wrap around the floated elements because of the cleared element above.</p>
</div>
"clearfix" 技术示例：
CSS
.container::after {
content: "";
display: table;
clear: both;
}
HTML
<div class="container">
<div class="sidebar">Sidebar Content</div>
<div class="main">Main Content</div>
</div>
7.3 使用 float 的优缺点
优点
- 简单易用：
- 使用
float可以轻松创建简单的布局
- 使用
- 广泛的浏览器支持：
float被所有现代浏览器支持，包括旧版本
- 布局灵活性：
- 可以创建不同的布局，包括图片环绕文本和多行布局
缺点
- 管理复杂布局的难度：
- 使用
float创建复杂布局时可能会出现问题，尤其是在需要垂直对齐时
- 使用
- 父元素高度问题：
- 父元素可能会“塌陷”，如果他们所有的子元素都浮动。这需要使用像
clearfix这样的技术来解决
- 父元素可能会“塌陷”，如果他们所有的子元素都浮动。这需要使用像
- 过时：
- 现代的方法，比如 Flexbox 和 Grid，提供了更强大和灵活的布局方式
使用 float 和 clear 创建布局的例子
使用 float 和 clear 创建一个双栏布局。
在这个例子中，创建了一个带侧边栏 (.sidebar) 和主内容 (.main) 的双栏布局。元素 .sidebar 和 .main 都浮动在左边，而 .footer 使用 clear: both; 防止环绕。
CSS
.container {
width: 100%;
}
.sidebar {
float: left;
width: 25%;
background-color: lightblue;
padding: 10px;
}
.main {
float: left;
width: 75%;
background-color: lightgreen;
padding: 10px;
}
.footer {
clear: both;
background-color: lightcoral;
padding: 10px;
text-align: center;
}
HTML
<div class="container">
<div class="sidebar">Sidebar Content</div>
<div class="main">Main Content</div>
<div class="footer">Footer Content</div>
</div>
尽管有更现代的方法出现，float 和 clear 的使用仍然是 web 开发人员工具箱中的重要工具。理解它们的工作原理有助于维护和更新旧项目，并创建简单布局。现代方法，如 Flexbox 和 Grid，常常成为创建复杂和响应式布局的更优选择，但对于 float 和 clear 的知识仍然是相关的。
GO TO FULL VERSION