第13课:浮动元素(float)

我们可以通过CSS属性float令元素向左或向右浮动。也就是说,令盒子及其中的内容浮动到文档(或者是上层盒子)的右边或者左边(参见第9课关于盒状模型的描述)。下图阐明了其原理:

一个向左浮动的盒子

举个例子,假如我们想让一张图片被一段文字围绕着,那么其显示效果将如下所示:

一个包含被文字环绕的图片的向左浮动的盒子

如何实现这个效果?

上例的HTML代码如下所示:

<div id="picture"><img src="bill.jpg" alt="Bill Gates"></div>
<p>causas naturales et antecedentes, idciro etiam nostrarum voluntatum...</p>

要实现图片向左浮动、而且被文字环绕的效果,你只需先设定图片所在盒子的宽度,然后再把CSS属性float设为left即可:

#picture {float:left;width: 100px;}

另一个例子:列

浮动也可以用于实现在文档中分列。要创建多个列,你需要在HTML代码里用div来结构化想要的各个列:

<div id="column1">
 <p>左</p>
</div>
<div id="column2">
 <p>中</p>
</div>
<div id="column3">
 <p>右</p>
</div>

下面,我们把各列的宽度设定为“33%”,并通过定义float属性令各列向左浮动:

#column1 {float:left;width: 33%;}
#column2 {float:left;width: 33%;}
#column3 {float:left;width: 33%;}

float属性的值可以是leftright或者none

clear属性

CSS属性clear用于控制浮动元素的后继元素的行为。

缺省地,后继元素将向上移动,以填补由于前面元素的浮动而空出的可用空间。在前面的例子中,文本自动上移到了比尔盖茨的图片旁。

clear属性的值可以是leftrightbothnone。原则是这样的:如果一个盒子的clear属性被设为“both”,那么该盒子的上边距将始终处于前面的浮动盒子(如果存在的话)的下边距之下。

<div id="picture"><img src="bill.jpg" alt="Bill Gates"></div>
<h1>Bill Gates</h1>
<p class="floatstop">causas naturales et antecedentes, idciro etiam 
nostrarum voluntatum...</p>

要避免文本上移到图片旁,我们可以在CSS中添加以下代码:

#picture {float:left;width: 160px;}
.floatstop {clear:both;}

小结

浮动在很多情况下都很有用,它经常与定位联合使用。在下一课,我们将深入了解如何进行盒子的绝对或相对定位。

125jz网原创文章。发布者:江山如画,转载请注明出处:http://www.125jz.com/5254.html

(0)
江山如画的头像江山如画管理团队
上一篇 2020年2月25日 下午3:14
下一篇 2020年2月25日 下午4:07

99%的人还看了以下文章

  • 第14课:元素的定位

    CSS定位令你可以将一个元素精确地放在页面上你所指定的地方。联合使用定位与浮动(参见第13课),你将能够创建多种高级而精确的布局。本课我们将讨论以下内容: CSS定位的原理 绝对定位 相对定位 CSS定位的原理 把浏览器窗口想象成一个坐标系统: CSS定位的原理是:你可以将任何盒子(box)放置在坐标系统的任何位置上。 假设我们要放置一个标题。通过使用盒状模…

    2020年2月25日
    2.1K0
  • Less编写及使用快速入门

    前面我们学习了《4个案例入门,学会LESS使用》,今天一起来学习如何编写,编译并使用LESS LESS的编写 LESS的使用是很容易的,使用你最常使用的代码编辑器,按LESSCSS的语法规则写好.less文件,接下来,使用编译工具它编译成.css,最后再引入页面即可。 LESS的编译 GUI编译工具 为方便起见,建议初学者使用GUI编译工具来编译.less文…

    2019年7月17日
    2.1K0
  • 第7课:HTML标签的属性

    许多元素都可以设置属性。 属性是什么? HTML通过标签告诉浏览器如何展示网页(比如告诉浏览器显示一个换行)。你可以为某些元素附加一些信息,这些附加信息被称为属性(attribute)。例1: <h2 style=”background-color: #ff0000;”>上125jz.com学网页制作</h2> 属性应写在元素的首标签…

    2018年1月20日
    2.4K0
  • 使用html、css、bootstrap设计一个电子商务网站的导航条(免费)

    本课程适合前端开发初级学习者,学习使用html、css和bootstrap技术,实现导航条设计。 预计用时:30分钟 1、实现导航条2、实现品牌字体3、实现搜索表单4、实现快捷菜单的显示

    2018年12月20日
    2.2K0
  • 第9课:盒状模型

    CSS中的盒状模型(box model)用于描述一个为HTML元素形成的矩形盒子。盒状模型还涉及为各个元素调整外边距(margin)、边框(border)、内边距(padding)和内容的具体操作。下图显示了盒状模型的结构: CSS中的盒状模型 上面的图示看上去可能感觉有点理论化,好吧,让我们试着用一个实例来解释盒状模型。在我们的例子中,有一个标题和一些文本…

    2020年2月25日
    4.0K0
  • 鼠标放上去,图片上方动态显示半透明说明文字(源码)

    <style> .itemInWorks{ width: 240px; height: 150px; border-radius:5px; font-size: 20px; font-weight: 600; color: #FFFFFF; text-align: center; line-height: 40px; background: ur…

    2020年2月20日
    2.7K0

发表回复

登录后才能评论