1818IP-服务器技术教程,云服务器评测推荐,服务器系统排错处理,环境搭建,攻击防护等

当前位置:首页 - 网站技术 - html/css - 正文

君子好学,自强不息!

如何CSS 布局 - 浮动和清除

2022-03-17 | html/css | gtxyzz | 510°c
A+ A-


每日笔记,文字浮动在图片上

CSS 布局 - 浮动和清除

CSS float 属性规定元素如何浮动。

CSS clear 属性规定哪些元素可以在清除的元素旁边以及在哪一侧浮动。



float 属性

float 属性用于定位和格式化内容,例如让图像向左浮动到容器中的文本那里。

float 属性可以设置以下值之一:

left - 元素浮动到其容器的左侧

right - 元素浮动在其容器的右侧

none - 元素不会浮动(将显示在文本中刚出现的位置)。默认值。

inherit - 元素继承其父级的 float 值

最简单的用法是,float 属性可实现(报纸上)文字包围图片的效果。

实例 - float: right;

下例指定图像应在文本中向右浮动:

Pineapple

实例

 img {
  float: right;
}


77css.png Web 技术教程 - 全部免费。你可以找到你所需要的所有的网站建设教程。从基础的 HTML 到 CSS,乃至进阶的 XML、SQL、JS、PHP。 我们的参考手册涵盖了网站技术的方方面面。其中包括W3C标准技术:HTML、CSS、XML 。以及其他技术,诸如 JavaScript、PHP、SQL 等。 我们提供上千个实例。通过使用我们的在线编辑器,你可以编辑这些例子,并对代码进行实验。



实例 - float: left;

下例指定图像应在文本中向左浮动:

实例

img {
  float: left;
}


77css.pngWeb 技术教程 - 全部免费。你可以找到你所需要的所有的网站建设教程。从基础的 HTML 到 CSS,乃至进阶的 XML、SQL、JS、PHP。 我们的参考手册涵盖了网站技术的方方面面。其中包括W3C标准技术:HTML、CSS、XML 。以及其他技术,诸如 JavaScript、PHP、SQL 等。 我们提供上千个实例。通过使用我们的在线编辑器,你可以编辑这些例子,并对代码进行实验。

本文来源:1818IP

本文地址:https://www.1818ip.com/post/409.html

免责声明:本文由用户上传,如有侵权请联系删除!

发表评论

必填

选填

选填

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。