09月14, 2018

float 特性

本文针对 float: left || float: right,会产生过的一些特性进行分析。

特性一:脱离文档流

脱离文档流这个词有些抽象,或许不是很好理解,接下来我用代码来演示一下什么是脱离文档流。

什么是脱离文档流

正常情况下,在父元素box不设置高度,只给子元素item设置高度的情况下,子元素会撑开父元素。

<!-- 结构 -->
<div class="box">
    <div class="item">盒子</div>
</div>
/* 样式 */
.box{
    background: blue;
}
.item{
    width: 100px;
    height: 100px;
    background: red;
}

通过以上代码,你会看到这样的效果:

正常效果

打开控制台,选中父元素,找到盒模型,会看到高度是100,也就是被撑开的高度:

盒模型

接下来我给子元素item设置了 float :

.item{
    width: 100px;
    height: 100px;
    background: red;
    /* 增加了浮动 */
    float:left;
}

你会看到这样的效果:

加了浮动

再次从控制台中查看父元素的高度,发现高度变成了0,子元素并没有撑开父元素,就好像不在之内一样:

盒模型

这就是脱离文档流最直观的呈现方式。

脱离文档流解决方式

解决脱离文档流我们一般称为清除浮动,清除浮动方式有多种,接下来只列出最常用也是推荐的两种方式。

  1. 给父元素增加 overflow:hidden

     .box{
         background: blue;
         /* 解决方式 */
         overflow:hidden
     }
    
  2. clearfix

    定义一个清除浮动的类.clearfix, 然后给父元素添加这个class

     <!-- 结构 增加了类名clearfix -->
     <div class="box clearfix">
         <div class="item">盒子</div>
     </div>
    
     /* clearfix 的定义 */
     .clearfix {
         zoom: 1;
     }
    
     .clearfix:before, .clearfix:after {
         content: '';
         display: table;
     }
    
     .clearfix:after {
         clear: both;
     }
    

特性二:转换为 inline-block

浮动会把一个标签转换为行间块元素,也就是 inline-block

这是一个很容易理解的特性,也是很容易被人忽略的特性,同样上代码:

<!-- 结构 -->
<span class="box">这是一个 span</span>
.box {
    /* 样式 */
    width: 200px;
    height: 100px;
    background: red;
}

结构上我只放了一个span标签,我们都知道,span是一个行内元素(inline),行内元素增加宽高是没有作用的,所以效果是这样的:

正常效果

然后我把代码稍微修改:

.box {
    width: 200px;
    height: 100px;
    background: red;
    /* 只增加了浮动 */
    float: left;
}

然后会发现宽高起作用了,注意我只增加了浮动,而没有增加别的样式:

加了浮动

position: absolute

其实本文应该是已经结束了的,不过最后还是提一嘴,position: absolutefloat有一些相似的特性,建议自己私下实验一下,这里我就不多说了。

本文链接:http://www.mobai.pro/post/floattexing.html

-- EOF --

Comments