网页中浮动设置一（39）

在前面我们介绍了文档流的概念，接下来我们将要介绍浮动。通过设置元素的浮动属性，我们可以让元素脱离文档流，从而实现一些特殊的浮动效果。浮动属性的取值有left、right、none和inherit。

新建HTML文件

首先，我们需要新建一个记事本文件，并将其后缀名改为.html，以便将其转化为可以在浏览器中打开的HTML文件。

使用Sublime Text编辑HTML文件

打开刚刚创建的HTML文件，在程序对话框中选择"Sublime Text"这个程序，开始对HTML文件进行编写。

编写HTML基本结构

在HTML文件中，我们首先需要添加lt;!DOCTYPE htmlgt;声明，表示这是一个HTML5文档。然后，添加lt;htmlgt;标签作为整个HTML文档的主体部分。

设置HTML头部

在HTML文档中，使用lt;headgt;标签包含头部内容。在头部中，使用lt;titlegt;标签来设置页面的标题，同时使用lt;metagt;标签来设置文档的编码方式为UTF-8，以确保浏览器能够正确显示网页内容。

设置浮动元素

在HTML的主体部分使用lt;bodygt;标签包含内容。我们可以在其中使用lt;divgt;标签来设置浮动元素。例如，我们设置一个红色的div块元素，宽度为100px，高度为200px，并且将其float属性设置为right，这样它就会向右浮动。类似地，我们还可以设置一个绿色的div块元素，宽度为100px，高度为200px，并将其float属性设置为left，使其向左浮动。

在浏览器中查看效果

保存HTML文件后，鼠标右击文件并选择“在浏览器中打开”选项，即可在浏览器中查看最终效果。我们可以看到红色的div块元素向右浮动，绿色的div块元素向左浮动。

源代码参考

下面是本案例的源代码，供大家参考：

lt;!DOCTYPE htmlgt;
lt;htmlgt;
lt;headgt;
  lt;titlegt;网页中浮动设置一（39）lt;/titlegt;
  lt;meta charset"utf-8"gt;
lt;/headgt;
lt;bodygt;
  lt;divgt;元素的浮动设置lt;/divgt;
  lt;div style"background-color: red; width: 100px; height: 200px; float: right;"gt;向右浮动lt;/divgt;
  lt;div style"background-color: green; width: 100px; height: 200px; float: left;"gt;向左浮动lt;/divgt;
lt;/bodygt;
lt;/htmlgt;

版权声明：本文内容由互联网用户自发贡献，本站不承担相关法律责任.如有侵权/违法内容,本站将立刻删除。