小结CSS的float属性

原创

前端林子

修改于 2019-01-27 07:35:30

5.1K10

代码可运行

文章被收录于专栏：前端技术总结前端技术总结

运行总次数：0

代码可运行

本文将从以下三个方面介绍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.小结

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

参考：

[1]https://blog.csdn.net/zhongqing_fzq/article/details/51454120

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

css

编程算法

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

css

编程算法

登录后参与评论

0 条评论

热度