与浮动相关的CSS属性
本文解释了与浮动相关的CSS属性。
您可以了解float和clear属性的用法及语法。
YouTube Video
预览的HTML
css-float.html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>CSS Properties Example</title>
7 <link rel="stylesheet" href="css-base.css">
8 <link rel="stylesheet" href="css-float.css">
9</head>
10<body>
11 <!-- Header -->
12 <header>
13 <h1>CSS Properties For Layout</h1>
14 </header>
15
16 <!-- Main content -->
17 <main>
18 <header>
19 <h2>Layout Related Properties</h2>
20 </header>
21 <article>
22 <h3>float</h3>
23 <section style="height: auto; color: black;">
24 <header><h4>float: left</h4></header>
25 <section class="sample-view">
26 <div class="float-left">float left</div>
27 <div class="content">
28 <p>
29 paragraph 1-1
30 paragraph 1-2
31 </p>
32 <p>paragraph 2</p>
33 </div>
34 <div class="clearfix"></div>
35 </section>
36 </section>
37 <section style="height: auto; color: black;">
38 <header><h4>float: right</h4></header>
39 <section class="sample-view">
40 <div class="float-right">float right</div>
41 <div class="content">
42 <p>
43 paragraph 1-1
44 paragraph 1-2
45 </p>
46 <p>paragraph 2</p>
47 </div>
48 <div class="clearfix"></div>
49 </section>
50 </section>
51 </article>
52 </main>
53</body>
54</html>与浮动相关的CSS属性
float和clear属性
1.content {
2 width: 300px;
3 height: 100px;
4}
5
6.content p {
7 background-color: lightblue;
8 margin: 10px;
9}
10
11.float-left {
12 float: left;
13 width: 150px;
14 margin-right: 20px;
15 background-color: lightblue;
16}
17
18.float-right {
19 float: right;
20 width: 150px;
21 margin-right: 20px;
22 background-color: lightblue;
23}
24
25.clearfix {
26 clear: both;
27 display: none;
28}float是CSS属性之一，用于将元素在其父元素内向左或右浮动，使其他元素围绕它排列。float属性常用于在文本周围放置图像或盒子元素，但随着flex和grid等新布局方法的普及，其使用率已下降。
- 在
float-left类中，float属性被设置为left。应用的元素浮动到父元素的左侧，接下来的元素围绕到右侧。 - “float-right” 类将
float属性设置为right。应用该类的元素会浮动到其父元素的右侧，后面的元素会在左侧环绕。 - 在
clearfix类中，clear属性被设置为both。使用此类可以防止下一个元素围绕浮动的元素排列。
float的使用方法
值
left：将元素浮动到左侧，允许其他元素在右侧围绕。right：将元素浮动到右侧，允许其他元素在左侧围绕。none：这是默认值，不会浮动元素。inherit：继承父元素的float属性值。
clear属性
- 当使用
float时，下一个元素可能会围绕浮动的元素。为防止这种情况，可以使用clear属性。clear属性可以设置以下值：。left：避免与浮动到左侧的元素重叠。右: 避免被右侧浮动的元素干扰。两者: 避免被左右两侧浮动的元素干扰。none：允许元素漂浮。这是默认值。
注意
- 使用
浮动时，可能会出现父元素高度忽略浮动元素高度的问题。为避免此问题，可以使用清除浮动技术或在父元素上设置overflow: hidden;。 - 在响应式设计或复杂布局中，
浮动相比于弹性布局(flex)或网格布局(grid)更难处理，因此推荐使用flex或grid。
总结
浮动是一种较早的方法，用于将元素向左或向右浮动，使得文字或其他元素环绕。它有时仍然用于简单布局或图片环绕。然而，为了创建更灵活且更简便的布局，推荐使用弹性布局(flexbox)或网格布局(grid)。
您可以在我们的YouTube频道上使用Visual Studio Code跟随上述文章进行学习。 请也查看我们的YouTube频道。