11.2 浮动

11.2 浮动

css属性float用于设置浮动,其取值如表11-2所示。

表11-2 float属性取值

20201012_201541_138.jpg

浮动能让元素脱离文档流,向左或向右移动。最初浮动用于图片,设置将图片浮动后文字环绕图片。下面的代码是在文字中插入一张图片。

<div >          桃(学名:Amygdalus persica L.):蔷薇科、桃属植物。落叶小乔木;叶为窄椭圆形至  披针形,长15厘米,宽4厘米,<img  src="../Images/timg.jpg"  width="200"  height="100"/>  先端成长而细的尖端,边缘有细齿,暗绿色有光泽,叶基具有蜜腺;树皮暗灰色,随年龄增长出现裂缝;  花单生,从淡至深粉红或红色,有时为白色,有短柄,直径4厘米,早春开花;近球形核果,表面有毛  茸,肉质可食,为橙黄色泛红色,直径7.5厘米,有带深麻点和沟纹的核,内含白色种子。      </div>

此段代码在浏览器中的显示效果如图11-8所示。

20201012_201541_139.jpg  

图11-8 在文字中插入图片的显示效果

可以看到,图片跟文字位于同一行,图片所在行的高度由图片的高度所在这一行中高度的元素——图片决定。如果设置图片浮动:

<img src="../Images/timg.jpg" width="200" height="100" style="float:left; "/>

则图片将向左浮动到父元素里的最左边,父元素中的文字环绕图片,效果如图11-9所示。

20201012_201541_140.jpg  

图11-9 图片浮动显示效果

现在浮动不仅用于图文混排,还可以将任意HTML元素设置浮动来达到特定的排版效果。浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。例11-4演示设置div浮动实现布局。

例11-4 11-4.html

<! DOCTYPE html >      <html>      <head>      <meta http-equiv="Content-Type" mrc="text/html; charset=gb2312" />      <title>元素浮动</title>      <link rel="stylesheet" type="text/css" href="css/common4.css"/>      </head>      <body>      <div class="main" >        <div class="float">1</div>        <div class="float">2</div>        <div class="float">3</div>        <div class="float">4</div>        <div class="float">5</div>      </div>      </body>      </html>

common4.css:

@charset "utf-8";      body, button, dd, div, dl, dt, form, h1, h2, h3, h4, h5, h6, html, iframe,  input, li, ol, p, select, table, td, textarea, th, ul      {          margin: 0;          padding: 0;      }      body, button, input, select, textarea      {          font-size: 12px;          font-family: "lucida grande", tahoma, verdana, arial,宋体,sans-serif;      }      .main       {              width: 600px;            height:400px;              margin:10px auto 10px auto;              border:1px solid;      }      .float      {            float:left;            width:250px;            height:100px;            border:1px dashed;            margin-left:5px;            margin-top:3px;      }

例11-4在浏览器中的显示效果如图11-10所示。

20201012_201541_141.jpg  

图11-10 div浮动效果

从图11-10可以看到,第一个子div向左浮动,遇到父元素边框时停止;第二个子div向左浮动,遇到父元素的边框线,试图移动到上一排,由于第一排剩下的空间足够(600px-1px*2-250px-5px=343px),所以第二个子div移动到第一排遇到第一个子div的边框时停止,此时这两个子div并排排列;第三个div也向左浮动,遇到父元素的边框线是试图向上移动与前面的div位于同一排,但第一排空间不够(600px-1px*4-250px*2-5px*2=86px),因此第三个div不能移动到上一排,只能位于第二排;其他子div的情况依次类推。利用浮动的特性,可以给页面布局,页面部分如图11-11所示,就是通过浮动设置多个div并排排列。

20201012_201541_142.jpg  

图11-11 浮动实现页面布局

由于浮动框不在文档的普通流中(脱离文档流),所以文档的普通流中的块框表现得就像浮动框不存在一样。如例11-4中如果类main不设置高度,即将CSS代码

height:400px;

删除,此时例11-4在浏览器中的显示效果如图11-12所示。

20201012_201541_143.jpg  

图11-12 浮动元素的父元素没有设置高度的效果

可以看到,如果父元素没有设置高度,由于子元素全部设置了浮动,因此父元素表现的像子元素不存在,内容为空,所以高度为0,父元素的上下边框线紧挨在一起,看起来就像一条直线。

使用浮动后,应该清除浮动。clear属性规定元素的哪一侧不允许其他浮动元素,取值如表11-3所示。为了避免出现图11-12中的情况,可以在最后一个浮动元素后清除浮动,添加清除浮动代码后的主要HTML代码如下:

表11-3 float属性取值

20201012_201541_144.jpg

<div class="main" >        <div class="float">1</div>        <div class="float">2</div>        <div class="float">3</div>        <div class="float">4</div>        <div class="float">5</div>        <div style="height:0px; clear:left; "></div>      </div>

此时的网页显示效果如图11-13所示。

20201012_201541_145.jpg  

图11-13 清除浮动效果

例11-5演示利用float进行布局,最好清除浮动。

例11-5 11-5.html

<! DOCTYPE html >      <html>      <head>      <meta http-equiv="Content-Type" mrc="text/html; charset=gb2312" />      <title>清除浮动</title>      <link rel="stylesheet" type="text/css" href="css/common5.css"/>      </head>      <body>      <div class="boxscore" >        <ul class="list">          <li class="hoverBg">            <span class="info">                  <a href="https://nba.hupu.com/games/recap/151999" target="_blank" >                    <span class="ft900">NBA&nbsp; &nbsp; </span>勇士 87:94 公牛 </a>            </span>            <em class="status">已结束</em>            <div class="clear"></div>          </li>          <li class="hoverBg">            <span class="info">                  <a href="https://nba.hupu.com/games/recap/152001" target="_blank" >                    <span class="ft900">NBA&nbsp; &nbsp; </span>雷霆 109:114 开拓者</a>            </span>            <em class="status">已结束</em>            <div class="clear"></div>          </li>          <li class="hoverBg">            <span class="info">                  <a href="http://g.hupu.com/soccer/report_10824777.html" target=  "_blank" >                      <span class="ft900">足球&nbsp; &nbsp; </span>拉科 1:1 马竞 </a>              </span>              <em class="status">已结束</em>              <div class="clear"></div>          </li>        </ul>      </div>      </body>      </html>

common5.css:

@charset "utf-8";      body, button, dd, div, dl, dt, form, h1, h2, h3, h4, h5, h6, html, iframe,  input, li, ol, p, select, table, td, textarea, th, ul      {          margin: 0;          padding: 0;      }      body, button, input, select, textarea      {          font-size: 12px;          font-family: "lucida grande", tahoma, verdana, arial,宋体,sans-serif;      }      ol, ul      {          list-style-type: none;      }      a {          text-decoration: none;      }      .boxscore  .list      {            padding-bottom:-1px;      }      .boxscore  .list  li {            width:228px;            line-height: 20px;      }      .boxscore  .list   .info      {            display: inline-block;            float: left;      }      .ft900      {            color: #900;      }      .boxscore  .list  .status {            float: right;            color: #848484;      }      .boxscore  .list  .clear      {            height:0px;            clear:both;      }

例11-5在浏览器中的显示效果如图11-14所示。

20201012_201541_146.jpg  

图11-14 例11-5在浏览器中的显示效果

发表评论:

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

微信扫一扫

微信扫一扫

微信扫一扫,分享到朋友圈

11.2 浮动