第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%的人还看了以下文章

  • 第13课:HTML音频/视频

    HTML 音频 在 HTML 中播放音频并不容易!您需要谙熟大量技巧,以确保您的音频文件在所有浏览器中(Internet Explorer, Chrome, Firefox, Safari, Opera)和所有硬件上(PC, Mac , iPad, iPhone)都能够播放。 <embed> 元素 <embed> 标签,这是一个 HT…

    2018年1月18日
    3.9K0
  • 3种纯CSS/jquery实现的表格隔行变色,鼠标悬停:hover变色效果

    表格隔行显示不同背景颜色,表格奇数行和偶数行交替显示不同的背景颜色。 一、纯CSS3实现表格隔行变色 关键CSS代码介绍 table tr:nth-child(odd){background:#F4F4F4;} table td:nth-child(even){color:#C00;} table tr:nth-child(5){background:#73…

    2018年9月5日
    4.6K0
  • “注册”按钮(图片)怎么跳转到注册页面?

    页面代码: <input name=”Submit” type=”submit” class=”STYLE2″ value=”登陆”> <input name=”Submit2″ type=”submit” class=”STYLE2″ value=”注册”> “注册”按钮怎么跳转到注册页面? <inpu…

    2021年4月5日
    2.9K0
  • CSS3动画:@keyframes animation 案例——制作滚动公告

    滚动公告的制作请参阅:Marquee标签实现跑马灯、滚动公告、通知效果 今天我们使用CSS3的@keyframes和animation 制作滚动文字公告。 @keyframes规则 @keyframes 规则用于创建动画。在@keyframes 中规定某项 CSS 样式,就能创建由当前样式逐渐改为新样式的动画效果。 注释:当动画完成后,动画的状态会回到初始状…

    2019年2月26日
    6.6K0
  • 跟永哥学HTML5(4):正确使用HTML5的header、hgroup和section

    在上一章HTML5新增语义化元素的使用中我们讲解了HTML新增的标签,并举例给出如何使用。但真正从HTML4转变到HTML5编程,并不是那么简单的事情,很多初学者没有真正了解这些标签,或错误使用HTML5的标签。这节课就给大家讲解常见的HTML5标签错误使用写法,帮助大家学会正确使用HTML5的header、hgroup和section。 1、只在需要的时候…

    2018年2月3日
    4.4K0
  • 第3课:颜色与背景

    本课,你将学习如何在网站上应用颜色与背景。我们还会介绍用于定位和控制背景图像的高级方法。

    2020年2月22日
    2.9K0

发表回复

登录后才能评论