CSS基础学习--16 Float(浮动)

这篇具有很好参考价值的文章主要介绍了CSS基础学习--16 Float(浮动)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、定义

        CSS 的 Float(浮动),会使元素向左或向右移动,其周围的元素也会重新排列。

Float(浮动),往往是用于图像,但它在布局时一样非常有用。

        元素的水平方向浮动,意味着元素只能左右移动而不能上下移动。一个浮动元素会尽量向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。浮动元素之后的元素将围绕它。浮动元素之前的元素将不会受到影响。

        如果图像是右浮动,下面的文本流将环绕在它左边:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>CSS基础学习-float浮动</title>
<style>
img 
{
	float:right;
}
</style>
</head>

<body>
<p>在下面的段落中,我们添加了一个 <b>float:right</b> 的图片。导致图片将会浮动在段落的右边。</p>
<p>
<img src="logocss.gif" width="95" height="84" />
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
</p>
</body>

</html>

CSS基础学习--16 Float(浮动)

 二、彼此相邻的浮动元素

如果你把几个浮动的元素放到一起,如果有空间的话,它们将彼此相邻。

在这里,我们对图片廊使用 float 属性:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>CSS基础学习-float当没有足够空间会怎样?</title> 
<style>
.thumbnail 
{
	float:left;
	width:110px;
	height:90px;
	margin:5px;
}
</style>
</head>

<body>
<h3>图片库</h3>
<p>试着调整窗口,看看当图片没有足够的空间会发生什么。</p>
<img class="thumbnail" src="/images/klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="/images/klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="/images/klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="/images/klematis4_small.jpg" width="120" height="90">
<img class="thumbnail" src="/images/klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="/images/klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="/images/klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="/images/klematis4_small.jpg" width="120" height="90">
</body>
</html>

CSS基础学习--16 Float(浮动)

三、清除浮动 - 使用 clear

元素浮动之后,周围的元素会重新排列,为了避免这种情况,使用 clear 属性。

clear 属性指定元素两侧不能出现浮动元素。文章来源地址https://www.toymoban.com/news/detail-493548.html

属性 描述 CSS
clear 指定不允许元素周围有浮动元素。 left
right
both
none
inherit
1
float 指定一个盒子(元素)是否可以浮动。 left
right
none
inherit
1

到了这里,关于CSS基础学习--16 Float(浮动)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 3-web前端 css 网页样式语言,基础语言、盒子模型、浮动

    html和css的关系:   HTML(HyperText Markup Language,超文本标记语言)是用于创建网页的标准标记语言。它负责定义网页的结构和内容。HTML使用各种标签来包含文本、链接、图 片、视频等元素,并可以与如JavaScript等其他技术结合使用,实现网页的动态功能。   CSS (Cascading S

    2024年02月08日
    浏览(65)
  • 前端学习笔记:CSS中浮动的原理,定位

    这是本人学习的总结,主要学习资料如下 马士兵教育 float设计的初衷是为了有文字环绕图片的效果,比如下图。 所以有浮动效果的元素一定不会遮挡其他元素的文字。比如有两个 div ,两个 div 都有文字,正常文字在 div 左上角。 我们设置一个浮动一个不浮动,我们会看到浮

    2024年02月03日
    浏览(53)
  • HTML5+CSS3学习笔记(九)前端页面六大布局(文档流布局、浮动布局、定位布局、表格布局、弹性布局、网格布局)

    本系列更多文章,可以查看专栏 HTML+CSS学习笔记 块级元素自上至下垂直排列,行内元素自左至右水平排列 块级元素独占一行,行内元素不会另起一行 默认情况下,height和width决定内容区的大小;内容区、内边距和边框构成可见区域的大小;外边距决定元素的位置 更多内容可

    2024年02月02日
    浏览(64)
  • Python系列(16)—— string类型转float类型

    Python中String类型转Float类型 方法1:使用 float() 函数 Python内置了 float() 函数,它可以直接将字符串转换为浮点数。如果字符串不能转换为浮点数,该函数将引发 ValueError 异常。 方法2:使用 ast.literal_eval() 函数 ast.literal_eval() 函数比 eval() 更安全,因为它只允许处理Python字面量结

    2024年02月21日
    浏览(41)
  • CSS笔记(黑马程序员pink老师前端)浮动,清除浮动

    浮动可以改变标签的默认排列方式。浮动元素常与标准流的父元素搭配使用. 网页布局第一准则 :多个块级元素纵向排列找标准流,多个块级元素横向排列找浮动。 float属性用于创建浮动框,将其移动到一边,直到左边缘或右边缘触及包含块或另一个浮动框的边缘。 1.浮动元素

    2024年02月09日
    浏览(52)
  • html+css 浮动、清除浮动、什么是BFC?、如何开启BFC

    介绍: 其实早期的浮动是用来文字环绕图片效果,但是后来发现浮动还可以设置页面布局问题 块元素在文档流中默认垂直排列,如果希望块元素在页面中水平排列,可以使块元素脱离文档流 特点: 哪个元素设置浮动,哪个元素就会脱离文档流 如果给上边的元素设置浮动时,

    2024年02月02日
    浏览(51)
  • css 伪元素和浮动

    效果 伪元素 CSS 伪元素用于设置元素指定部分的样式。 例如,它可用于: 设置元素的首字母、首行的样式 在元素的内容之前或之后插入内容 效果 浮动 早期:图文环绕 现在:网页布局 图文环绕 浮动特点 浮动的标签 顶对齐 浮动: 在一行排列, 宽高生效 – 浮动后的标签具备

    2024年02月13日
    浏览(51)
  • CSS元素浮动

    在最初,浮动是用来实现文字环绕图片效果的,现在浮动是主流的页面布局方式之一。 脱离文档流。 不管浮动前是什么元素,浮动后,默认宽与高都是被内容撑开的(尽可能小),而且可以设置宽高。 不会独占一行,可以与其他元素共用一行。 不会margin合并,也不会margi

    2024年02月09日
    浏览(52)
  • CSS 浮动 & 定位

    用 CSS 来摆放盒子,把盒子摆放到相应位置。 CSS 提供了三种传统布局方式(简单说就是盒子如何进行排列)。 普通流(标准流) 浮动 定位 默认的块元素会占满父元素的宽度,设置浮动之后,按照设置浮动的方向 进行缩小,缩小到内部的内容的宽度为准,之后漂浮在页面上

    2024年01月19日
    浏览(54)
  • html&CSS-----浮动

      目录 前言:  浮动 1.浮动的效果  2.浮动的特点  3.浮动的写法 4.浮动的原理 5.浮动的作用  6.案例 7.浮动的缺陷与解决方式 浮动问题  解决方式  8.补充说明         浮动是html里面重要的一部分,前面我们学习了三种元素的类型(块级元素,行内元素和行内块元素),今

    2024年02月16日
    浏览(41)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包