css浮动(float)

最新推荐文章于 2022-11-01 15:50:04 发布

唐小新

最新推荐文章于 2022-11-01 15:50:04 发布

阅读量955

点赞数 1

CC 4.0 BY-SA版权

分类专栏： web前端-javascript 文章标签： css 前端

本文链接：https://blog.youkuaiyun.com/xtu_xiaoxin/article/details/49176791

web前端-javascript 专栏收录该内容

10 篇文章

订阅专栏

前言

关于float，我相信大家都接触过，也都用过，应该都知道float的作用以及使用float时呈现的效果。但是，如果你仅仅是停留在了解的基础上，我相信float的很多行为会让你大吃一惊。下面我将根据一些例子来描述下float的一些特性。

测试例子

例子1 - 所有元素使用float：

<div class="dt">
  <div>测试块一</div>
   <span class="float">
     普通流 - 非float
   </span>
</div>

css代码

float {
    /* float:right;*/  先不赋予float属性
    background-color:#FFC0CB;
    color:#fff;

测试结果

展示结果很正常，很好理解，没有什么问题。那让我们看看给元素赋上float属性会是什么样吧。

.float {
    float:right;
    background-color:#FFC0CB;
}

测试结果-float属性

现象一：父元素(虚线部分）高度收缩了，为什么呢？哦，原来是float元素会脱离文档流，不再占用父元素的空间，既然不占用空间，对父元素来说，float就好像不存在一样咯；
现象二：还有个特性，不知大家注意到没，float元素和父元素(width:400px)是右边对齐的,所以我们又得出一个结论：虽然float是脱离文档流的，对父元素来说好像不存在似的，但它是不会跑到父元素边界的外面，浮动还是受到父元素的限制的；
现象三：如果浮动元素前面有相邻的块级元素(block)的话，会把浮动元素挤到下面。

提示：有时我们仅仅希望使用浮动来进行文档布局，浮动元素的尺寸仍然保留，这就需要用到浮动清除（clear）了，关于浮动清除，主要应用到css元素clear: both处理，更详细的了解可以去网上搜索相关资料

关于现象三，如果元素前面有相邻的行内元素(inline)呢，又会出现什么样的结果？测试一下,HTML代码修改如下：

<div class="dt">
   <span>测试块一</span>
    <span class="float">
      普通流 - float:left
    </span>
</div>

为了更清晰看见效果，修改css中 float值为left:

.float {
    float:left;
    background-color:#FFC0CB;
}

测试结果

看到了吧，如果浮动元素前面有相邻的行级元素(inline)的话，是不会把浮动元素挤到下面，相反浮动元素会把行级元素内容挤到后面去(这个结论的前题是浮动元素的宽度+行级元素的宽度小于父元素的宽度）

例子2 - 当块级元素或行内元素遇上文档流

为了更好的演示，将HTML作以下修改：

<div class="dt">
      <div>测试块一</div>
      <span class="float">
        普通流 - float：left
      </span>
       <div style="background-color:red;color:#fff;">
          No wonder there's so much cynicism out there. No wonder there's so much disappointment.
       </div>
    </div>

float {
    float:left;
    background-color:#FFC0CB;
    border:solid 1px blue;
    /* 设置透明样式 */
     filter:alpha(opacity=50);
      -moz-opacity:0.5;
      -khtml-opacity: 0.5;
      opacity: 0.5;
}

测试结果

通过半透名的float元素可看到，float元素脱离文档流了，对块级元素框（红色北京部分）进行了覆盖，但块级元素(block)里的行内元素(英文字母）在float元素后，所以float元素并没有对这些文字进行覆盖。所以这里可得出结论：浮动是脱离文档流的，会覆盖块级元素(block)的框，但不能覆盖行内元素(inline)的框。

可以参照下面例子作进一步验证：
修改HTML如下（将块级元素标签div换成行内元素标签span)：

<div class="dt">
      <div>测试块一</div>
      <span class="float">
        普通流 - float：left
      </span>
       <span style="background-color:red;color:#fff;">
          No wonder there's so much cynicism out there. No wonder there's so much disappointment.
       </span>
    </div>

测试结果

看见了吧，通过半透明的float元素，已经不能看见红色的背景色了。所以浮动元素不会覆盖行内元素（inline),只会”挤压”行内元素的空间。

例子3- 行内元素（inline)带上浮动属性

<div class="dt">
      <div>测试块一</div>
      <span class="float" style="width:300px;height:200px;">
        普通流 - 非float
      </span>
 </div>

.float {
    /*float:left;*/
    background-color:#FFC0CB;
}

测试结果

span是一个行内元素（inline),所以，对它设置width和height属性，是不会有任何效果的，从展示结果可以看出，确实无任何影响。那我将span元素加上浮动属性，会是什么样呢？看下面例子：

.float {
    float:left;
    background-color:#FFC0CB;
}

测试结果

看见了吧，行内元素(inline)加上浮动属性，就有了block的特性啦。

总结

float在网页设计中是用的非常广的一个特性，但它也是一个非常古怪、难琢磨的东西，要想透彻的理解它的特性，看来还是需要好好测试、验证。