小结CSS的float属性

前端林子

本文将从以下三个方面介绍CSS的float属性:

  • 什么是float
  • 浮动引发的问题
  • 几种清除浮动的方法

1.什么是float

应用了float属性的元素,就像在印刷布局中,形成文字环绕图片的效果。除此之外,浮动还可以用于创建网页布局

1.1文本环绕图片

通过给图片设置float属性,形成文字环绕图片的效果,是float属性的常见应用场景之一:

效果:

附上实现代码:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>float:文字环绕效果</title>
    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
        }

        img {
            float: left;
        }
    </style>
</head>

<body>
    <div class="container">
        <img src="./images/gakki.jpg" alt="gakki" />
        新垣结衣(Aragaki Yui),1988年6月11日出生于冲绳县那霸市。日本女演员、歌手、模特。毕业于日出高中。
        2001年,参加《nicola》模特比赛并获得最优秀奖。2005年,因出演现代剧《涩谷15》而作为演员出道。2006年,参演校园剧《我的老大,我的英雄》;同年,她还出版了个人首本写真集《水漾青春》。2007年,她从日出高校毕业后开始专注于演艺发展,并发表个人首张音乐专辑《天空》;同年,新垣结衣还主演了爱情片《恋空》,而她也凭借该片获得了多个电影新人奖项
        。2010年,主演爱情片《花水木》。
        2011年,主演都市剧《全开女孩》。2012年,相继参演现代剧《Legal
        High》、剧情片《剧场版新参者:麒麟之翼》。2013年,主演都市剧《飞翔情报室》。2014年,她主演了剧情片《黎明的沙耶》。2016年,主演爱情喜剧《逃避虽可耻但有用》,并凭借该剧获得了多个电视剧女主角奖项。2017年,主演爱情片《恋爱回旋》,凭借该片获得第60届蓝丝带奖最佳女主角;同年11月,她还凭借医疗剧《Code
        Blue 3》获得第94届日剧学院赏最佳女配角 。2018年,出演电影《Code Blue》 ;主演爱情剧《无法化为野兽的我们》。
        新垣结衣长相甜美、笑容纯真,拥有天使般笑容的她被受访者们称为“治愈系”美女。而在电影《恋空》中她的表演既具深度又生活化。

    </div>
</body>

</html>

1.2创建网页布局

float属性还常用于网页布局:

效果:

实现原理:

侧边栏、中间内容区域的元素设置向左浮动(float:left;),最下面的footer元素设置为清除左右两边的浮动(clear:both;)

2.float的属性值

float有四个可用的属性值:

left:元素向左浮动

right:元素向右浮动

none:默认值。元素不浮动,并会显示在其在文本中出现的位置。

inherit: 规定应该从父元素继承 float 属性的值。

3.浮动引发的问题

3.1破坏性

这个在我的一篇文章小结BFC的基本知识与应用中也提过:如果父元素的子元素都是浮动元素,那么父元素的高度会发生高度塌陷。

导致这一现象的原因在于:

应用了float的元素会脱离文档流,即子元素都脱离了文档流,而父元素还处在正常的文档流中。自然,父元素不能被浮动子元素撑开,导致父元素的高度塌陷为零。

3.2包裹性

我们都知道,div元素是块级元素,会占据一行。而如果给div元素增加设置了float,看起来这个div元素会变得紧凑,宽度就是能把内容包裹住的宽度,例如:

3.3 其他问题

被设置了float的元素会脱离文档流,效果是布局时看起来是会尽量往一边靠拢,空格、换行这些都和该元素没关系了。

例如下面三个是正常的三个img图片,可以看到每个图片之间是有空格的:

而如果给img图片设置了float属性,就会看到图片直接没有空格了:

3.4 老IE中的问题

IE6、IE7有一些浮动相关 bug,由于越来越多的设计师不再支持 IE6 了,你也可以不关注它。不过对于那些要关注的人来说,这里有些大概[1]:

(1)推倒:

浮动元素内的元素(大多是图片)比浮动元素本身宽造成的现象。大多数的浏览器会在浮动之外渲染图片,但是不会有伸出来的部分影响其他布局。IE 会扩展浮动来包含图片,突破伸出主内容之外把侧栏推到下面。

快速修正:确保不是图片造成这种情况,使用 overflow:hidden 来切除多余的部分。

(2)双倍边距bug:

处理 IE6 时,需要记住的事情是,如果在和浮动方向相同的方向上设置外边距(margin),会引发双倍边距。

快速修正:给浮动设置 display:inline; 而且不用担心,它依然是块级元素。

(3)3像素间距:

挨着浮动元素的文本会神奇的被踢出去3像素,好像浮动元素的周围有一个奇怪的力场一样。

快速修正:在受影响的文本上设置宽度或高度。

(4)IE7 中,底边距 bug是当浮动父元素有浮动子元素时,这些子元素的底边距会被父元素忽略掉。快速修正:用父元素的底内补白(padding)代替。

4.如何清除浮动

4.1clear属性

规定元素的哪一侧不允许有其他浮动元素

clear: none | left | right | both

left:不允许左侧有浮动对象;

right:不允许右侧有浮动对象;

none:默认值,允许两边都有浮动对象;

both:两侧不允许有浮动对象。

例如上面1.2中创建网页布局中,就是将最下面的footer元素,设置为清除左右两边的浮动(clear:both;)

#footer {
            ...
            clear: both;
        }

4.2使用空标签清除浮动

还是以上述为例,侧边栏、中间内容区域的元素设置向左浮动(float:left;),为了清除浮动,把侧边栏、中间栏外包一层父元素,然后在父元素的闭合标签前,增加一个空元素,并且设置它的clear:both;。<div>是最常用的:

<div style="clear:both;"></div>

代码:

<div>
        <div id="side-bar">
            //侧边栏
        </div>
        <div id="main-content">
            //中间栏
        </div>
        <div style="clear:both;"></div>
    </div>

4.3触发BFC

还是以上述为例,侧边栏、中间内容区域的元素设置向左浮动(float:left;),为了清除浮动,给包含浮动元素的父元素,设置overflow:hidden;触发父元素生成BFC。由于BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素,反之亦然。所以父元素里面的浮动元素不会影响到外面的其他元素,达到清除浮动的效果。

<div style="overflow: hidden;">
        <div id="side-bar">
            //侧边栏
        </div>
        <div id="main-content">
            //中间栏
        </div>
    </div>

4.4clearfix(推荐)

给设置了浮动的元素的父元素,设置clearfix样式:

.clearfix:after {
            content: '';
            display: block;
            clear: both;
        }

        .clearfix {
            zoom: 1;//兼容低版本IE
        }

代码:

<div class="clearfix">
        <div id="side-bar">
            //侧边栏
        </div>
        <div id="main-content">
            //中间栏
        </div>
    </div>

5.小结

本文主要结合了具体事例,分别介绍了什么是浮动、设置浮动会有什么影响,以及如何消除浮动。如有问题,欢迎指正。

· END ·

本文分享自微信公众号 - 腾讯云TStack(gh_035269c8aa5f)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-03-22

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

编辑于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励