小结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 | bothleft：不允许左侧有浮动对象；
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 ·