宝塔服务器面板,一键全能部署及管理,送你3188元礼包,点我领取

本文针对 float: leftfloat: 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 -->
<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),行内元素增加宽高是没有作用的,所以效果是这样的:

正常的span标签

然后我把代码稍微修改:

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

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

加了浮动的span标签

position: absolute

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

标签: 浮动, css

添加新评论