图解float属性的详细信息

2024-06-24 05:58

本文主要是介绍图解float属性的详细信息,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

转自:http://www.cnblogs.com/58top/archive/2013/01/09/details_about_float_property.html

正确使用CSS的float属性可能会变成一项艰巨的任务,,它涉及内容过多,浏览器兼容性问题也很多。它的定位不仅涉及 包含块,还涉及到了行框,块框,还有行内框等内容。本文包含的实施例的应用属性float说明性例子,以及一些失误。

CSS的float示例1

“float”是什么?

CSS中的某些元素是块元素,例如,如果你把两个段落标记为P,那么他们将被放置在两行,。自己各占一行,如何向显示一行的话可以为元素使用inline属性来在页面显示,

另外一种有效改变页面元素的环绕属性是使用float,典型的例子是使用“float”,将图像向左或向右对齐。下面是一个简单的HTML代码的图片和段落:

<img src="http://lorempixum.com/200/200/" />
<p>Lorem ipsum...</p>

它们显示在一个新行:

CSS的float例2

让我们给image 增加点CSS代码,让他变变样,嘻嘻:

img
{float: right;margin: 20px;
}

这时,我们得到的是右对齐:

CSS的float示例3

如果有更多的文字,段落会继续环绕周围的图像:如下面的图

CSS的float例4

例如,我们需要做的图像和文本缩进20像素。如何你这样写代码下面的代码是错误的,不会生效的

p
{margin: 20px;
}

以这种方式,这将是正确的:如下图

img
{margin: 20px;
}
CSS的float例如5

那么你要问了为什么上面写的p段落缩进20个像素会不起作用呢,不生效呢?为了找到答案,让我们添加一个框架代码:

p
{border: solid 1px black;
}

结果可能会让你大吃一惊:

CSS的float的例子6

事实证明,看到没有加上边框之后(这里加不加边框对他们的影响是没有任何作用的,只不过是为了让你明白),图片是在段落内!因此,margin属性不起作用在第一种情况。为了解决这个问题,你可以为段落p使用浮动:float:left,设置一个绝对宽度:设置之后的效果如下图

复制代码
img
{float: right;margin: 20px;
}p
{float: left;width: 220px;margin: 20px;
}
复制代码
CSS的float例如7

奇怪的规则“float”

现在,让我们转向更复杂的方式使用“float”的规则,变换float对象。当创建缩略图时,它可能是必要的。例如:

复制代码
<ul><li><img src="http://placehold.it/100x100&text=1"/></li><li><img src="http://placehold.it/100x150&text=2"/></li><li><img src="http://placehold.it/100x100&text=3"/></li><li><img src="http://placehold.it/100x100&text=4"/></li><li><img src="http://placehold.it/100x100&text=5"/></li><li><img src="http://placehold.it/100x150&text=6"/></li><li><img src="http://placehold.it/100x100&text=7"/></li>
</ul>
复制代码

默认情况下,每个li条目将各占一行。如果我们将每一个“float:left”,图像将排队一个换行符:

li
{float: left;margin: 4px;
}
CSS的float例如8

但是,如果图像是不同的高度呢?

CSS的float例如:9

 如果我们向列表中的元素的添加display属性,效果会好一些如下面的图

1 li
2 {
3   display: inline;
4 }
CSS的float例如10

现在就让我们来垂直对齐:

img
{ vertical-align: top;
}
CSS的float例11

应该记住,如果这是图像更高的情况下,所有其它图像会围绕前一个图像,例如:

CSS的float例如12

另外一个例子是改变顺序的元素,我们有一个列表的项目,

复制代码
<UL> <LI> <img src="http://placehold.it/100x100&text=1"/> </ li> <LI> <IMG SRC =“http://placehold.it/100x100&text=2”/ > </ li> <LI> <img src="http://placehold.it/100x100&text=3"/> </ li> <LI> <IMG SRC =“http://placehold.it/100x100&text=4 /> </ li> <LI> <img src="http://placehold.it/100x100&text=5"/> </ li> <LI> <IMG SRC =“http://placehold.it/100x100&text = 6“/> </ li> 
</ ul>
复制代码

如果我们想要它们以相反的顺序排列的,我们只需要使用“float: right:”而非“float: left”,在HTML中,我们并没有改变元素顺序如上面的代码: 我们使用 css来操作

CSS的float例如13

在“float”的帮助下,页面上的项目进行组合是方便的,但我们面临的一个大问题:以下内容(文字或块)也会跟着变化。例如,我们有一组图片:

CSS的float例如14

 下面的文字开始流动,周围的整个块:

CSS的float例如15

为了避免这种情况,你必须使用“clear”的属性。如果我们将其应用到第二个图像:

ul li:nth-child(2)
{ clear: left;
}

以下是我们得到:

CSS的float例如16

在这种情况下,剩余的图像继续继承“float: left”。与此相对应,文字将显示失真:

CSS的float例如17

我们需要对于段落使用clear:both:

p
{clear: both;
}

解决我们的问题是:

CSS的float例如18

现在,让我们想象一下,前面的例子我们需要设置背景为画廊的。如果该项目不浮动,那么我们将不得不这样:

ul
{background: gray;
}
CSS的float例如19

但是如果我们添加“float: left”从列表中,背景完全消失:

CSS的float例如20

如果我们先设置高度为UL:

ul
{height: 300px;
}
CSS的float例如21

它并没有解决问题,因为背景的大小被定义。类“clearfix”,这将被应用到'DIV'的元素在同一水平上的UL,会帮助我们。

.clearfix
{clear: both;
}

有另一种解决方案,使用的“overflow”:

ul
{overflow: auto;
}
CSS的float实例22

九条规则的float-items:

  1. 浮动的项目不能超出它的父容器的边缘。
  2. 左浮动框的左外边界(margin edge)不可以出现在它包含块左边界之左。对于右浮动的元素也有类似规则
  3. “如果当前框是左浮动框,并且在源文档中存在更早生成的左浮动框,那么对于任意这些先前的框,要么当前框的左外边出现在先前框的右外边之右,要么它的顶部必须在先前框的底部之下。对于向右浮动的框也有类似的规则。
  4. 左浮动框的右外边不可以出现在它右侧的任何右浮动框的左外边之右。对于向右浮动的元素也有类似的规则
  5. 浮动框的顶边不可以高于源文档中先前元素产生的块框或浮动框的顶
  6. 浮动框的顶边不可以高于源文档中先前元素产生的包含一个框的任何行框的顶
  7. 一个浮动块必须位于尽可能高。
  8. 左浮动框必须尽量靠左放置,右浮动框必须尽量靠右放置。在更高的位置和更靠左或靠右的位置间,选择前者
  9. 左浮动框左边如果有另外一个左浮动框,它的右外边不可以出现在它包含块的右边之右。(或者比较宽松的要求是:一个左浮动不可以超出右边,除非它已经尽可能地靠左排列。)对于向右浮动的元素也有类似的规则。

可见,浮动的规则却是很让人迷惑,但从这几条规则中你也不难发现,浮动的宗旨是,在不溢出包含块的情况下,尽量的靠上靠左/右放置,但是不能高于它前面生成的块框、浮动框和行框的顶。

这篇关于图解float属性的详细信息的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1089355

相关文章

滚雪球学Java(87):Java事务处理:JDBC的ACID属性与实战技巧!真有两下子!

咦咦咦,各位小可爱,我是你们的好伙伴——bug菌,今天又来给大家普及Java SE啦,别躲起来啊,听我讲干货还不快点赞,赞多了我就有动力讲得更嗨啦!所以呀,养成先点赞后阅读的好习惯,别被干货淹没了哦~ 🏆本文收录于「滚雪球学Java」专栏,专业攻坚指数级提升,助你一臂之力,带你早日登顶🚀,欢迎大家关注&&收藏!持续更新中,up!up!up!! 环境说明:Windows 10

C 标准库 - `<float.h>`

C 标准库 - <float.h> 概述 <float.h> 是 C 标准库中的一个头文件,它定义了与浮点数类型相关的宏。这些宏提供了关于浮点数的属性信息,如精度、最小和最大值、以及舍入误差等。这个头文件对于需要精确控制浮点数行为的程序非常有用,尤其是在数值计算和科学计算领域。 主要宏 <float.h> 中定义了许多宏,下面列举了一些主要的宏: FLT_RADIX:定义了浮点数的基数。

图解TCP三次握手|深度解析|为什么是三次

写在前面 这篇文章我们来讲解析 TCP三次握手。 TCP 报文段 传输控制块TCB:存储了每一个连接中的一些重要信息。比如TCP连接表,指向发送和接收缓冲的指针,指向重传队列的指针,当前的发送和接收序列等等。 我们再来看一下TCP报文段的组成结构 TCP 三次握手 过程 假设有一台客户端,B有一台服务器。最初两端的TCP进程都是处于CLOSED关闭状态,客户端A打开链接,服务器端

HTML5自定义属性对象Dataset

原文转自HTML5自定义属性对象Dataset简介 一、html5 自定义属性介绍 之前翻译的“你必须知道的28个HTML5特征、窍门和技术”一文中对于HTML5中自定义合法属性data-已经做过些介绍,就是在HTML5中我们可以使用data-前缀设置我们需要的自定义属性,来进行一些数据的存放,例如我们要在一个文字按钮上存放相对应的id: <a href="javascript:" d

图解可观测Metrics, tracing, and logging

最近在看Gophercon大会PPT的时候无意中看到了关于Metrics,Tracing和Logging相关的一篇文章,凑巧这些我基本都接触过,也是去年后半年到现在一直在做和研究的东西。从去年的关于Metrics的goappmonitor,到今年在排查问题时脑洞的基于log全链路(Tracing)追踪系统的设计,正好是对这三个话题的实践。这不禁让我对它们的关系进行思考:Metrics和Loggi

Python中的属性装饰器:解锁更优雅的编程之道

引言 在Python的世界里,装饰器是一个强大的工具,它允许我们以一种非侵入性的方式修改函数或方法的行为。而当我们谈论“属性装饰器”时,则是在探讨如何使用装饰器来增强类中属性的功能。这不仅让我们的代码更加简洁、易读,同时也提供了强大的功能扩展能力。本文将带你深入了解属性装饰器的核心概念,并通过一系列实例展示其在不同场景下的应用,从基础到进阶,再到实际项目的实战经验分享,帮助你解锁Python编程

react笔记 8-17 属性绑定 class绑定 引入图片 循环遍历

1、绑定属性 constructor(){super()this.state={name:"张三",title:'我是一个title'}}render() {return (<div><div>aaaaaaa{this.state.name}<div title={this.state.title}>我是一个title</div></div></div>)} 绑定属性直接使用花括号{}   注

ConstraintLayout布局里的一个属性app:layout_constraintDimensionRatio

ConstraintLayout 这是一个约束布局,可以尽可能的减少布局的嵌套。有一个属性特别好用,可以用来动态限制宽或者高app:layout_constraintDimensionRatio 关于app:layout_constraintDimensionRatio参数 app:layout_constraintDimensionRatio=“h,1:1” 表示高度height是动态变化

Python中的私有属性与方法:解锁面向对象编程的秘密

在Python的广阔世界里,面向对象编程(OOP)是一种强大而灵活的方法论,它帮助我们更好地组织代码、管理状态,并构建可复用的软件组件。而在这个框架内,私有属性与方法则是实现封装的关键机制之一。它们不仅有助于隐藏类内部的具体实现细节,还能保护数据免受外部干扰。今天,让我们一起探索Python中私有属性与方法的魅力所在,了解它们如何在实际开发中发挥重要作用。 引言 随着软件系统变得越来越复杂,维

转:android ro.debuggable属性调试修改(mprop逆向)

android ro属性调试修改(mprop逆向)      大家都知道如果需要调试android 的程序,以下两个条件满足一个就行。第一是apk的配置文件内的AndroidManifest.xml的 android:debuggable=”true”,第二就是/default.prop中ro.debuggable=1。两种方式第一种通常是解包添加属性再打包,随着加壳软件以及apk校验等,容易出