>

所以文档中普通流中的元素表现的就像浮动元素

- 编辑:澳门博发娱乐官网 -

所以文档中普通流中的元素表现的就像浮动元素

浅谈图片宽度自适应建设方案

2015/10/19 · CSS, HTML5 · 3 评论 · 自适应

初稿出处: 百码山庄   

在网页设计中,随着响应式设计的来到,各个响应式施工方案无独有偶。对于图片响应式的标题也许有非常多前端开采人员在进行研商。相比好的图样响应式设想正是在分裂的荧屏分辨率下行使不相同实际尺寸的图片,而达到规定的规范在火速网络境遇中采纳大或重特大高清图片,在低速网络或必要替顾客节省流量能源的条件中应用小而鲜明的图片,保证客商无论在何种意况下都能有优异的浏览体验。可是那是贰个特大而富有挑战的劳作,笔者这里不做那个切磋,因为小编当下还并未有那上头很好的试行。这里本人是要跟大家切磋下同一张图纸在不一致幅度的呈现区域中的显示难点。

<div class="img-wrap">

参考

张鑫旭-《CSS世界》


作者简要介绍:

中文名:石头
英文名:micstone
某电商平台前端程序员一名,临时也写写后端代码,职业经验二〇一四.7~至今。

1 赞 1 收藏 评论

澳门博发娱乐官网 1

CSS布局之div交叉排布与尾巴部分对齐--flex达成,css--flex

近年来在用wordpress写页面时,设计员给出了一种网页排布图样,在此以前并未有蒙受过,其在Computer上(分辨率大于768px)的成效图如下:

澳门博发娱乐官网 2

而在堂弟大(分辨率小于等于768px)上务求那样排列:

澳门博发娱乐官网 3

自己想开了三种方法

第一种是用bootstrap的row、col-md合营col-md-push、col-md-pull来促成,代码如下:

 1 <!DOCTYPE html>
 2 <html>
 3   <head>
 4     <meta charset="utf-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1">
 6     <link rel="stylesheet" href="../../vendor/bootstrap-3.3.7-dist/css/bootstrap.min.css" media="screen" title="no title">
 7     <title>div左右交叉布局--文字和图片交叉</title>
 8   </head>
 9   <body>
10 <style>
11 .C {
12   margin: auto;
13   padding: 30px 20px 40px;
14   max-width: 600px;
15 }
16 .I {
17   width: 100%;
18 }
19 .IW, .TW {
20   border: 1px solid rgba(0, 0, 0, 0.3);;
21 }
22 .TW {
23   padding: 25%;
24 }
25 </style>
26 <div class="C">
27   <div class="row">
28     <div class="col-md-6">
29       <div class="IW">
30         <img class="I" src="../../asset/images/flex/r1.jpg" alt="澳门博发娱乐官网 4">
31       </div>
32     </div>
33     <div class="col-md-6">
34       <div class="TW">我是文字,我用到了padding来实现大致居中</div>
35     </div>
36   </div>
37   <div class="row">
38     <div class="col-md-6 col-md-push-6">
39       <div class="IW">
40         <img class="I" src="../../asset/images/flex/r1.jpg" alt="澳门博发娱乐官网 5">
41       </div>
42     </div>
43     <div class="col-md-6 col-md-pull-6">
44       <div class="TW">我是文字,我用到了padding来实现大致居中</div>
45     </div>
46   </div>
47   <div class="row">
48     <div class="col-md-6">
49       <div class="IW">
50         <img class="I" src="../../asset/images/flex/r1.jpg" alt="澳门博发娱乐官网 6">
51       </div>
52     </div>
53     <div class="col-md-6">
54       <div class="TW">我是文字,我用到了padding来实现大致居中</div>
55     </div>
56   </div>
57 </div>
58   </body>
59 </html>

微型Computer上功效:

澳门博发娱乐官网 7     

手提式有线电话机上效果与利益:

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 <title>div左右交叉布局--文字和图纸交叉</title> 7 </head> 8 <body> 9 <style> 10 .C { 11 margin: auto; 12 padding: 30px 20px 40px; 13 max-width: 600px; 14 } 15 .XC90 { 16 display: block; 17 width: 百分百; 18 } 19 @media only screen and (min-width: 768px) { 20 .Enclave { 21 display: flex; 22 width: 百分百; 23 } 24 } 25 .Evoque:nth-child(even) { 26 flex-direction: row-reverse; 27 } 28 .I, .W { 29 width: 二分一; 30 } 31 .I img { 32 width: 百分之百; 33 } 34 .W { 35 display: flex; 36 flex-direction: column; 37 font-size: 16px; 38 justify-content: center; 39 } 40 </style> 41 <div class="C"> 42 <div class="安德拉"> 43 <div class="I"><img src="../images/flex/r1.jpg" alt=""></div> 44 <div class="W">小编是文字,笔者使用了flex布局,笔者按column在主轴y轴上居中对齐。</div> 45 </div> 46 <div class="V8 Vantage"> 47 <div class="I"><img src="../images/flex/r1.jpg" alt=""></div> 48 <div class="W">我是文字,作者动用了flex布局,小编按column在主轴y轴上居中对齐。</div> 49 </div> 50 <div class="Murano"> 51 <div class="I"><img src="../images/flex/r1.jpg" alt=""></div> 52 <div class="W">小编是文字,俺动用了flex布局,笔者按column在主轴y轴上居中对齐。</div> 53 </div> 54 </div> 55 </body> 56 </html>

微型Computer上效用如下:

.Rubicon:nth-child(even) { flex-direction: row-reverse; } ,然后在手提式有线电话机上让其常规排列即可 .Kuga { display: block; width: 百分之百; } 。

 

自己还发现,用flex能够很轻巧的落到实处多少个div底部对齐,具体代码如下:

.C {
  display: flex;
  align-items: flex-end;
}
.A {
  background: rgba(255, 0, 0, 0.1);
}
.A:nth-child(odd) {
  background: #1a88ea;
  color: white;
  font-size: 30px;
  padding: 10px 15px;
}
</style>
<div class="C">
  <div class="A">创新</div>
  <div class="A">实验基地</div>
</div>

实际上正是让C内的div,以主轴为x(按row排列时,主轴即为x,未指明flex-diretion时,默感到按row排列),排布方向为row,然后让div都在y轴(交叉轴)上高居底部 align-items: flex-end; 

功能如下:

<style media="screen"> .C { position: relative; } .A { display: inline-block; background: rgba(255, 0, 0, 0.1); } .A:nth-child(odd) { background: #1a88ea; color: white; font-size: 30px; padding: 10px 15px; } .A:nth-child(even) { bottom: 0; position: absolute; } </style> <div class="C"> <div class="A">立异</div> <div class="A">实验集散地</div> </div>

而是料定,用flex达成特别方便人民群众。

 

ps: 小编那篇博客快写完时,chrome崩溃了5次,不清楚是输入法的缘由,照旧chrome本人的缘由,反正一输入字符就自动退出。

 

 

澳门博发娱乐官网 8

方今在用wordpress写页面时,设计员给出了一种网页排布图样,从前从没遇上过,其在电脑...

 * {
     margin: 0;
     padding: 0;
 }
 #main {
     position: relative;
 
 }
 .box {
     padding:15px 0 0 15px;
     float:left;
 }
 .pic {
     padding: 10px;
     border: 1px solid #ccc;
     border-radius: 5px;
     box-shadow: 0px 0px 5px #ccc;
     img {
         width:165px;
         height:auto;
     }
 }

兵来将挡,水来土掩

是难题,总有消除的不二等秘书技,只是本金高低的标题。对于地方那个难题作者合计了悠久,刚开始自个儿想使用width: 百分之百;max-width: 图片宽度; 来管理,可是,笔者意识图片宽度并不联合,max-width要求针对每三个上涨的幅度去设置,那根本不可行,无疑是自作自受麻烦,因为实在运用中,大家一起不可能预言客户将选用多大开间的图片。所以就像单从决定图片样式已经找不到怎么解决办法了,可是本人起来关怀 width:百分百; 的难点。

作者们知晓,在CSS中,宽度的百分比是是龃龉于父级容器宽度的。假如大家能有一点子调控图片标签的父容器的升幅,那难题是还是不是就一下子就解决了了呢?

首先,为了让图片标签有可控的父成分,大家先对代码结构做一小点调动:

JavaScript

<div class="img-wrap"> <img src="imgs/560x200.jpg" alt=""> </div> <div class="img-wrap"> <img src="imgs/440x200.jpg" alt=""> </div> <div class="img-wrap"> <img src="imgs/300x200.jpg" alt=""> </div>

1
2
3
4
5
6
7
8
9
<div class="img-wrap">
    <img src="imgs/560x200.jpg" alt="">
</div>
<div class="img-wrap">
    <img src="imgs/440x200.jpg" alt="">
</div>
<div class="img-wrap">
    <img src="imgs/300x200.jpg" alt="">
</div>

好了,接下去正是怎样调整img-wrap成分的上升的幅度的难点了。我首先想到的是生成(float),因为大家明白浮动元素的增加率是随内容更改的,所以小编先给img-wrap设置了之类样式:

JavaScript

.img-wrap {float: left;}

1
.img-wrap {float: left;}

可是,难点又来了,浮动成分会毁掉原有的布局,倘使不做扫除浮动管理,会导致前边的剧情紧跟在转换成分之后。所感到了确认保障不影响其余内容,大家还得在img-wrap外面加一个容器来支配转变与否:

JavaScript

<div class="row"> <div class="img-wrap"> <img src="imgs/560x200.jpg" alt=""> </div> </div> <div class="row"> <div class="img-wrap"> <img src="imgs/440x200.jpg" alt=""> </div> </div> <div class="row"> <div class="img-wrap"> <img src="imgs/300x200.jpg" alt=""> </div> </div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="row">
    <div class="img-wrap">
        <img src="imgs/560x200.jpg" alt="">
    </div>
</div>
<div class="row">
    <div class="img-wrap">
        <img src="imgs/440x200.jpg" alt="">
    </div>
</div>
<div class="row">
    <div class="img-wrap">
        <img src="imgs/300x200.jpg" alt="">
    </div>
</div>

好啊,今后大家在来看看,被折腾成什么样样子了,图片宽度自适应(3):

澳门博发娱乐官网 9

哈哈,好疑似笔者想要的功力了。不过,作为三个多少偏执性精神障碍的开垦者,即便到达了作者想要的效果,但加了那么多层嵌套标签,总让本身备感不痛快。于是,笔者一而再折腾,终于笔者醒来, display:inline-block 的成分宽度也是随内容更换的,并且图片暗许样式恰巧也显现为inline-block的魔法,是不是能够从此间出手吧?

JavaScript

<div class="img-wrap"> <img src="imgs/560x200.jpg" alt=""> </div> <div class="img-wrap"> <img src="imgs/440x200.jpg" alt=""> </div> <div class="img-wrap"> <img src="imgs/300x200.jpg" alt=""> </div>

1
2
3
4
5
6
7
8
9
<div class="img-wrap">
    <img src="imgs/560x200.jpg" alt="">
</div>
<div class="img-wrap">
    <img src="imgs/440x200.jpg" alt="">
</div>
<div class="img-wrap">
    <img src="imgs/300x200.jpg" alt="">
</div>

布局再次回归到独有一层嵌套,可是css样式却要求调解一下:

JavaScript

.img-wrap {display: inline-block;}

1
.img-wrap {display: inline-block;}

当自己,再一次举行测量检验的时候,心满意足多了,你们感受下:图形宽度自适应(4)。

最后,补上完整的css代码:

CSS

JavaScript

.img-wrap { display: inline-block; } .img-wrap img { width: 100%; vertical-align: middle; }

1
2
3
4
5
6
7
.img-wrap {
  display: inline-block;
}
.img-wrap img {
    width: 100%;
    vertical-align: middle;
}

2 赞 10 收藏 3 评论

澳门博发娱乐官网 10

(大屏时)

2. float的特性

float有哪些有意思的表征呢?具体如下:

  • 包裹性
  • 惊人塌陷
  • 块状化
  • 未有其他margin合併

上边将详细解说这几点的含义。

JavaScript(本身清楚的申明)

回顾尝试

为了保障音讯体现完整,保障图片随可视区域上升的幅度变化而宽度自适应,笔者一贯给图片标签设置了升幅百分之百,具体职能请看:图表宽度自适应(2)。

和演示一起一,大家还是手动退换可视区域上升的幅度来见见图片的显现:

澳门博发娱乐官网 11

今天看来图片是足以依靠可视区域上涨的幅度自适应了,可是难点来了:首先,全体图片不论原始大小宽窄一律以然则区域上涨的幅度为专门的学问了,齐刷刷的一刀切,毫无美感;其次,当较宽显示区域展现较窄图片时,图片出现严重失真,以至失去识别度。好呢,窄屏的标题一挥而就了,宽屏的标题有来了,不晓得那是要闹哪样!然则难点出来了,我们总要想方法去消除啊,那如何做呢?

}

3. float与流体布局

利用float能够因而破坏健康的文书档案流完成CSS环绕,不过却带来了”高度塌陷”的题材!然而大家得以行使float破坏经常文书档案流的特色完毕部分常用的布局:

  • 文字环绕变身-中间内容居中,左中右布局

直白看例子:

<div class="box"> <a href="javascript:;" class="fl">左青龙</a> <a href="javascript:;" class="fr">右白虎</a> <h3 class="text-center">标题</h3> </div>

1
2
3
4
5
<div class="box">
    <a href="javascript:;" class="fl">左青龙</a>
    <a href="javascript:;" class="fr">右白虎</a>
    <h3 class="text-center">标题</h3>
</div>

.box{ background-color: #f5f5f5; } .fl{ float: left; } .fr{ float: right; } .text-center{ text-align: center; }

1
2
3
4
5
6
7
8
9
10
11
12
.box{
    background-color: #f5f5f5;
}
.fl{
    float: left;
}
.fr{
    float: right;
}
.text-center{
    text-align: center;
}

从下图中看出,完毕了中间内容居中的左中右布局。

澳门博发娱乐官网 12

  • 文字环绕的衍生-单侧固定
&lt;div class="box"&gt; &lt;a href="javascript:;"
class="fl"&gt;左青龙&lt;/a&gt; &lt;a href="javascript:;"
class="fr"&gt;右白虎&lt;/a&gt; &lt;h3
class="text-center"&gt;标题&lt;/h3&gt; &lt;/div&gt;

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f69ec384a3401669605-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f69ec384a3401669605-2">
2
</div>
<div class="crayon-num" data-line="crayon-5b8f69ec384a3401669605-3">
3
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f69ec384a3401669605-4">
4
</div>
<div class="crayon-num" data-line="crayon-5b8f69ec384a3401669605-5">
5
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f69ec384a3401669605-1" class="crayon-line">
&lt;div class=&quot;box&quot;&gt;
</div>
<div id="crayon-5b8f69ec384a3401669605-2" class="crayon-line crayon-striped-line">
    &lt;a href=&quot;javascript:;&quot; class=&quot;fl&quot;&gt;左青龙&lt;/a&gt;
</div>
<div id="crayon-5b8f69ec384a3401669605-3" class="crayon-line">
    &lt;a href=&quot;javascript:;&quot; class=&quot;fr&quot;&gt;右白虎&lt;/a&gt;
</div>
<div id="crayon-5b8f69ec384a3401669605-4" class="crayon-line crayon-striped-line">
    &lt;h3 class=&quot;text-center&quot;&gt;标题&lt;/h3&gt;
</div>
<div id="crayon-5b8f69ec384a3401669605-5" class="crayon-line">
&lt;/div&gt;
</div>
</div></td>
</tr>
</tbody>
</table>

.father{ border: 1px solid #444; overflow: hidden; } .father > img { width: 60px; height: 64px; float: left; } .girl { /* 环绕和自适应的区分所在 */ margin-left: 70px; }

1
2
3
4
5
6
7
8
9
10
11
12
.father{
    border: 1px solid #444;
    overflow: hidden;
}
.father > img {
    width: 60px; height: 64px;
    float: left;
}
.girl {
    /* 环绕和自适应的区别所在 */
    margin-left: 70px;
}

和文字环绕效果相比较,分化便是.girl多了三个margin-left: 70px,同一时间图片的肥瘦设置60px,因而不会生出文字环绕的功效。这里,我们也能够不使用margin-left,改用border-left或者padding-left都能够达到规定的规范更换content box的尺寸,进而达成宽度自适应布局作用。

澳门博发娱乐官网 13

复制代码 代码如下:

难题陈诉

我们先来看下笔者想要描述的题目。首先小编绸缪了三张宽度分裂的图片,让他俩垂直排列在页面中,除了剔除图片本人在笔直方向上发生的距离,不做别的任何样式管理,这种地方大家一般在博文中平时看到,在写博文的时候平日选择,具体效果请看:图片宽度自适应(1)。简单看下大家的页面结构:

JavaScript

<img src="imgs/560x200.jpg" alt=""><br> <img src="imgs/440x200.jpg" alt=""><br> <img src="imgs/300x200.jpg" alt="">

1
2
3
<img src="imgs/560x200.jpg" alt=""><br>
<img src="imgs/440x200.jpg" alt=""><br>
<img src="imgs/300x200.jpg" alt="">

为了有助于查看效果,大家间接调解浏览器宽度来测验。测量试验效果如下gif图所示:

澳门博发娱乐官网 14

我们轻巧察觉,在我们转移窗口可视区域的时候,图片宽度并不会随着转移,以致于在小荧屏中大家不得不开到图片的一部分,那是许五个人所不乐见的,因为那极有一点都不小可能率会招致重大音讯错失。那么那个难题何以缓慢解决?

    <img src="imgs/300x200.jpg" alt="">

4.1 clear属性

在CSS中可以动用clear来排除float属性带来可观塌陷等难题,使用格式如下:

clear: none | left | right | both

1
clear: none | left | right | both
  • none:暗中同意值,允许两侧都有生成对象;
  • left:不容许左侧有调换对象;
  • right:不允许左侧有转移对象;
  • both:两侧不允许有变化对象。

即使单从字面上的意趣来领会,clear:left应该是”扫除左浮动“,clear:right应该是”免除右浮动“,实际上,这种说法是有毛病的,因为变化向来还在,并未解决!只能清除浮动带来的熏陶。

合法对clear属性的表明是:“成分盒子的边不能和后面包车型地铁改动成分相邻”。注意这里的”前边的”3个字,也便是clear属性对”前边的”浮动成分是习感觉常的。clear属性只好清除成分的小编,不能影响其余的要素。接着看上面包车型客车那么些事例:

/* HTML代码 */ <div class="box1"></div> <div class="box2"></div>

1
2
3
/* HTML代码 */
<div class="box1"></div>
<div class="box2"></div>

/* CSS代码 */ .box1 { float: left; width: 100px; height: 60px; padding: 10px; border: 3px solid black; background: url("../../lib/img/mm1.png") center no-repeat; } .box2 { border: 3px solid red; padding:10px; width:100px; height: 60px; background: url("../../lib/img/mm2.jpg") center no-repeat; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/* CSS代码 */
.box1 {
    float: left;
    width: 100px;
    height: 60px;
    padding: 10px;
    border: 3px solid black;
    background: url("../../lib/img/mm1.png") center no-repeat;
}
.box2 {
    border: 3px solid red;
    padding:10px;
    width:100px;
    height: 60px;
    background: url("../../lib/img/mm2.jpg") center no-repeat;
}

澳门博发娱乐官网 15

如上海教室所示,box1因素为设置了左浮动,已经脱离了例行的文书档案流,所以box2能够在box1的底层展现。若是想让box2能够换行排列,则只必要在.box2类中加进clear:left体制就能够。如下图所示:

澳门博发娱乐官网 16

 <body>
     <div id="main">
         <div class="box">
             <div class="pic">
                 <img src="images/0.jpg" alt="">
             </div>
         </div>
         <div class="box">
             <div class="pic">
                 <img src="images/1.jpg" alt="">
             </div>
         </div>
         <div class="box">
             <div class="pic">
                 <img src="images/2.jpg" alt="">
             </div>
         </div>
         <div class="box">
             <div class="pic">
                 <img src="images/3.jpg" alt="">
             </div>
         </div>
         <div class="box">
             <div class="pic">
                 <img src="images/4.jpg" alt="">
             </div>
         </div>
         <div class="box">
             <div class="pic">
                 <img src="images/2.jpg" alt="">
             </div>
         </div>
         <div class="box">
             <div class="pic">
                 <img src="images/3.jpg" alt="">
             </div>
         </div>
         <div class="box">
             <div class="pic">
                 <img src="images/4.jpg" alt="">
             </div>
         </div>
         <div class="box">
             <div class="pic">
                 <img src="images/5.jpg" alt="">
             </div>
         </div>
         <div class="box">
             <div class="pic">
                 <img src="images/6.jpg" alt="">
             </div>
         </div>
         <div class="box">
             <div class="pic">
                 <img src="images/7.jpg" alt="">
             </div>
         </div>
         <div class="box">
             <div class="pic">
                 <img src="images/3.jpg" alt="">
             </div>
         </div>
         <div class="box">
             <div class="pic">
                 <img src="images/4.jpg" alt="">
             </div>
         </div>
         <div class="box">
             <div class="pic">
                 <img src="images/5.jpg" alt="">
             </div>
         </div>
         <div class="box">
             <div class="pic">
                 <img src="images/3.jpg" alt="">
             </div>
         </div>
         <div class="box">
             <div class="pic">
                 <img src="images/4.jpg" alt="">
             </div>
         </div>
         <div class="box">
             <div class="pic">
                 <img src="images/5.jpg" alt="">
             </div>
         </div>
         <div class="box">
             <div class="pic">
                 <img src="images/6.jpg" alt="">
             </div>
         </div>
         <div class="box">
             <div class="pic">
                 <img src="images/7.jpg" alt="">
             </div>
         </div>
         <div class="box">
             <div class="pic">
                 <img src="images/3.jpg" alt="">
             </div>
         </div>
     </div>
 </body>

(小屏时)

1. float介绍

CSS世界中的float属性是叁个时期特别漫长的习性,设置了float属性的要素会依靠设置的属性值向左大概向右浮动,直到它的异地缘遇到含有框或另贰个浮动框的边框截至。设置了float属性的要素会从常常文书档案流中退出,也正是不占用任何空间,所以文书档案中国和东瀛常流中的因素展现的就疑似浮动成分不设有一样,因而,设置float属性的后会影响大家的页面布局。具体说来就是:让block成分无视float成分,让inline成分像流水同样围绕着float成分达成转移布局

float属性设计的初志:仅仅是让文字像流水一样环绕浮动元素,就好像下图中突显的等同:

澳门博发娱乐官网 17

您恐怕感兴趣的稿子:

  • js实现的佳丽瀑布流效果代码
  • javascript自适应宽度的瀑布流完成思路
  • 纯js达成瀑布流表现照片(自动适应窗口大小)
  • 解析瀑布流布局:JS+绝对牢固的贯彻
  • js完毕瀑布流的一种轻巧方法实例分享
  • 原生JS达成响应式瀑布流布局
  • 原生JavaScript实现瀑布流布局
  • 基于JavaScript完成瀑布流布局
  • 基于JavaScript完毕瀑布流布局(二)
  • 详解javascript完成瀑布流相对式布局

    <img src="imgs/560x200.jpg" alt="">

CSS 深切精通之 float 浮动

2018/05/25 · CSS · float

原作出处: micstone   

float属性是CSS中常用的壹天性质,在事实上职业中应用的充足多,倘诺使用不当就能够现出预期之外的功用。即使很五人说变化会用就行、浮动过时了,可是对于精美的前端开辟职员,必要有”刨根问底”的神气,这样在产出局地标题标时候才不至于”手慌脚乱”!由此,明天就特地整理和小结一下float属性。

总结:

本文由胜博发-前端发布,转载请注明来源:所以文档中普通流中的元素表现的就像浮动元素