轻轻松松学CSS：float

float属性，会使元素向左或向右移动，其周围的元素也会重新排列。float不仅自己飘忽不定，还对周围元素有影响，这种影响力不容小觑。他捉摸不定（浮动规律不好把握），他干涉他国内政（对周围元素有影响），这些特点就像今天的美国总统特朗普（别名“特不靠谱”）。学习float就得了解它的前世今生，它的本质，掌握它的规律才能降妖除魔，为我所用。

一、float的前世今生

float设计之初，目的就是图文环绕

如果float一直踏踏实实、本本分分的干好本职工作，那他就是一个“好人”。float本该“不忘初心，牢记使命”，就像我们党开展的教育活动那样，可是他后来忘记了自己的初衷，竟参与到网页布局中，一度还乐此不疲，甚至受到一些程序员青睐。

最早的网页布局很简单，元素的排列就是靠table、tr、td这样一些标签，页面很简单，float就是用来做图文环绕的，但是后来程序员发现float用在布局上也不错，打破了tabel（tr、td）标签死板的布局方式，float布局更加灵活多样。这样float就开始了“华丽转身”，正式成为网页布局中的一员大将。

其实，float有很多毛病，他的浮动规律让很多人摸不着头脑，而且周围元素经常受到影响，稍有不慎原有的排布会支离破碎，所以有人说他是“魔鬼”，说他是“混球”，说他是“不务正业”，说他“跨界太大”，一点也不为过。

随着浏览器版本的升级，float在布局方面的作用逐渐被取代，但是，由于float的兼容性好，尽管他有很多问题，人们还是（不得不）包容他，在研究浮动规律的基础上，驾驭他、降伏他、利用他。

二、float的浮动规律

（一）float的本质

1、包裹性（与inline-block\block对比）

包裹性就是在未设定宽度的情况下，根据内容自适应（也可以叫“自收缩”）。如下图：

具有包裹性的还有display:inline-block、position:absolute、position:fixed等。

在布局上float与inline-block很相似，如下图：

虽然很相似，但是仔细观察上图还是有些差别，比如li之间的缝隙，inline-block中间有缝，float中间没缝，在实际布局中，一般都希望中间没缝，这样便于计算尺寸。所以，float在这方面有先天优势（float能去空格，严丝合缝适合网页布局，通常把float布局叫做“码砖头”）。当然，如果你不介意中间的缝隙，或者采用一些办法去掉缝隙，也可以采用inline-block，实际情况下，如果代码稍微复杂些，inline-block可能还会出现垂直对齐（vertical-align）的问题，到时你可以查阅一些资料来解决问题。

不要以为float和inline-block比较相似，就以为浮动元素的显示方式（display）就是inline-block，实际上，浮动元素的显示方式（display）是block，确切地说是“通常情况下，浮动元素display：block”，有些情况虽然不是block，比如display：list-item，本质上也和block差不多。

下图，span元素本来是内联元素（display：inline）浮动（float：left）后，我们通过浏览器右键的“审查元素”可以看到display：block

Normal
0

7.8 磅
0
2

false
false
false

EN-US
ZH-CN
X-NONE

MicrosoftInternetExplorer4

/* Style Definitions */
table.MsoNormalTable
{mso-style-name:普通表格;
mso-tstyle-rowband-size:0;
mso-tstyle-colband-size:0;
mso-style-noshow:yes;
mso-style-priority:99;
mso-style-qformat:yes;
mso-style-parent:"";
mso-padding-alt:0cm 5.4pt 0cm 5.4pt;
mso-para-margin:0cm;
mso-para-margin-bottom:.0001pt;
mso-pagination:widow-orphan;
font-size:10.5pt;
mso-bidi-font-size:11.0pt;
font-family:"Calibri","sans-serif";
mso-ascii-font-family:Calibri;
mso-ascii-theme-font:minor-latin;
mso-fareast-font-family:宋体;
mso-fareast-theme-font:minor-fareast;
mso-hansi-font-family:Calibri;
mso-hansi-theme-font:minor-latin;
mso-bidi-font-family:"Times New Roman";
mso-bidi-theme-font:minor-bidi;
mso-font-kerning:1.0pt;}

这样，行内元素（比如span标签、a标签）和块元素（比如div标签）一旦浮动后都是一样的效果了，就是说<div style=”float:left;background:#ccc”>浮动元素</div>与<span style=”float:left;background:#ccc”>浮动元素</span>是完全一样的。这时再加上display属性就多余了，加上display属性（比如display:inline）浏览器也不会采用，纯属画蛇添足。

有人就问了“多个浮动元素可以水平排列在同一行，而浮动元素display:block就应该独占一行呀！，这不是互相矛盾吗？”，你看到上图中的那个词语了吗？“特殊”的块元素。因为浮动元素脱离了文档流（标准流），此时的块元素（display：block）已不是标准流中的块元素了，它自收缩（包裹性），不再占用整行宽度，所以多个浮动元素可以水平排列在同一行。

补充一点，浮动元素“脱离标准流”，这里的“脱离标准流”和position:absolute脱离标准流不太一样，float的脱离标准流，在自由度上受限，不是自由翱翔的那种，而absolute脱离标准流是可以满世界乱跑的那种，自由度很大。所以，有的资料中不认可“浮动元素脱离标准流”的说法。本文不过于追究细节，笼统地说“浮动元素脱离标准流”，读者可以粗略这么理解。

2、破坏性

破坏性，就是打破规则，并且影响周围元素。就像特朗普不断退群，不断修改规则，尽管让别的国家不知所措，对美国心生怨恨，但碍于美国实力，只能忍气吞声。

本文第一张图的第一部分，图片浮动前和文字基线对齐，在一行显示，图片高度比文字高，所以图片所在的这行跟别的（纯文字）行就不一样，这行显得很高，其实就是图片给撑起来的。

图片浮动（float：left）后，以往的规则打破了，它像一副躯壳一样向左移动，它和文字不再基线对齐，打破了原有的规则。破坏性不仅表现在对齐方式的改变，还表现在父元素的高度塌陷上（子元素在浮动前要向父元素汇报高度，父元素把所有子元素的高度收集到后就确定了自己的高度，子元素浮动后，就不再向父元素汇报高度了，因此父元素收集不到子元素的高度就导致自己的高度塌陷）。

Normal
0

7.8 磅
0
2

false
false
false

EN-US
ZH-CN
X-NONE

MicrosoftInternetExplorer4

（二）浮动规则

1、图文环绕可以推广为：行内级内容会被浮动元素推出去（行内级内容包括行内级元素、inline-block元素、块级元素的文字内容）

行内级内容被浮动元素推出

提示读者，操作时注意调整浏览器的宽度

Normal
0

7.8 磅
0
2

false
false
false

EN-US
ZH-CN
X-NONE

MicrosoftInternetExplorer4

Normal
0

7.8 磅
0
2

false
false
false

EN-US
ZH-CN
X-NONE

MicrosoftInternetExplorer4

2、浮动元素只能在当前行中移动（float：left，从右向左移动
float：right相反），遇到包含块（父元素）或其他浮动元素的边界为止。如果水平方向剩余的空间不够显示，浮动元素将向下移动，直到有足够的空间位置为止。

下面的代码

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>code2</title>

 </head>

 <body>

     这是第一部分文字，如果浏览器的宽度较小，这段文字会在图片的上方

     <img src="img/pic1.jpg" style="float:left;">

     <span style="color:#000;">第二部分文字，其他内容，其他内容，其他内容，其他内容（更多内容在此省略）</span>

 </body>

 </html>

在浏览器宽度较大时，第一部分文字和第二部分文字都在图片右侧排列

Normal
0

7.8 磅
0
2

false
false
false

EN-US
ZH-CN
X-NONE

MicrosoftInternetExplorer4

Normal
0

7.8 磅
0
2

false
false
false

EN-US
ZH-CN
X-NONE

MicrosoftInternetExplorer4

在浏览器宽度较小时，第一部分文字在图片的上方排列

Normal
0

7.8 磅
0
2

false
false
false

EN-US
ZH-CN
X-NONE

MicrosoftInternetExplorer4

下面的代码是几个div浮动后排布的情况

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>test</title>

 </head>

 <style>

     .box1{width:200px;height:400px;background:blue;}

     .box2{width:300px;height:300px;background:yellow;}

     .box3{width:400px;height:200px;background:purple;}

     .box4{width:100px;height:500px;background:red;}

     .box5{width:500px;height:400px;background:green;}

     .box6{width:500px;height:100px;background:gray;}

     .box7{width:100px;height:400px;background:orange;}

     .box8{width:400px;height:400px;background:#ccc;}

     div{float:left;}

 </style>

 <body>

     <div class="box1">box1</div>

     <div class="box2">box2</div>

     <div class="box3">box3</div>

     <div class="box4">box4</div>

     <div class="box5">box5</div>

     <div class="box6">box6</div>

     <div class="box7">box7</div>

     <div class="box8">box8</div>

 </body>

 </html>

代码结构：八个div都是float：left，box1至box8依次，尽管浏览器宽度不同时，浮动元素排布的结果不同，但是都遵循一定的规则，请看下图

Normal
0

7.8 磅
0
2

false
false
false

EN-US
ZH-CN
X-NONE

MicrosoftInternetExplorer4

Normal
0

7.8 磅
0
2

false
false
false

EN-US
ZH-CN
X-NONE

MicrosoftInternetExplorer4

为了说明问题，稍微删减部分div，div仍然都是float：left，div的宽、高有所调整

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>code4</title>

 </head>

 <style>

     .box1{width:400px;height:100px;background:blue;}

     .box2{width:100px;height:500px;background:yellow;}

     .box3{width:300px;height:200px;background:purple;}

     .box4{width:300px;height:300px;background:red;}

     .box5{width:300px;height:300px;background:green;}

     div{float:left;}

 </style>

 <body>

     <div class="box1">box1</div>

     <div class="box2">box2</div>

     <div class="box3">box3</div>

     <div class="box4">box4</div>

     <div class="box5">box5</div>

 </body>

 </html>

由以上图可见，浮动元素的排列有相当严格的等级制度，后浮动的元素只能与前面的浮动元素在同一水平线上（以顶部为准），前提是后面的空间足够大。如果后面的空间不够，就会向下错位，错位后如果没有遇到阻力，还是水平移动（float：left从右向左移动，float：right相反），移动过程中不会再上移动，水平移动直到遇到阻力，永远不会出现后面的浮动元素高于前面的浮动元素（以顶部为准）。就是说，后浮动的元素要么与前面的浮动元素平起平坐（顶部在同一水平线上），前提是后面的空间足够大；如果后面的空间不够，后浮动的元素只能处于下层，永远不会出现“僭越”，等级森严！

三、清除浮动

float是魔鬼，是混球，是黑恶势力，清除浮动就是“降妖除魔”，就是“扫黑除恶”。

Normal
0

7.8 磅
0
2

false
false
false

EN-US
ZH-CN
X-NONE

MicrosoftInternetExplorer4

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>code5</title>

 </head>

 <style>

     .wrap{background:red;}

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

     .content{float:left;width:300px;height:100px;}

     .content1{background:lightblue;}

     .content2{background:lightgreen;}

     .content3{background:darkblue;}

     .footer{height:50px;background:#ccc;}

 </style>

 <body>

     <div class="wrap">

         <div class="content content1"></div>

         <div class="content content2"></div>

         <div class="content content3"></div>

     </div>

     <div class="footer">footer</div>

 </body>

 </html>

方法1、增加一个额外的div（clear：both）

</div>

<div class="footer">footer</div>

这种方法就是相当于加了一个防火墙（防魔墙）,打了一个隔板，但是因为增加了额外标签，可读性不强，所以不怎么推荐。

方法2、在父元素（class=”wrap”）填加属性overflow:hidden

.wrap{overflow:hidden;}

这种方法的解释，很难用一句话两句哈说清楚，所以本文不解释理由，这种方法兼容性也还可以，所以推荐使用。

方法3、使用父元素的伪类选择器

.wrap:after{display:block;content:””;clear:both;}

这跟方法1的道理差不多，但是没有增加额外标签，兼容性也还可以，所以推荐使用。

四、float的未来命运

我们使用float浮动做了很多其本职工作以外的事情。目前用float实现的不管是分栏布局，还是列表排列，我们都可以用其他一些CSS属性代替实现，唯一一个实现不了的就是“文字环绕图片”。未来，float可能会再回到老本行，只做图文环绕，把网页布局交给其他属性，也就是说float可能会退出网页布局的历史舞台。但那是将来的事，如果你对浏览器的兼容性有较高要求，你还不得不掌握它的浮动规律。

Normal
0

7.8 磅
0
2

false
false
false

EN-US
ZH-CN
X-NONE

MicrosoftInternetExplorer4

Normal
0

7.8 磅
0
2

false
false
false

EN-US
ZH-CN
X-NONE

MicrosoftInternetExplorer4

Normal
0

7.8 磅
0
2

false
false
false

EN-US
ZH-CN
X-NONE

MicrosoftInternetExplorer4

下图，span元素本来是内联元素（display：inline）浮动（float：left）后，我们通过浏览器右键的“审查元素”可以看到display：block

轻轻松松学CSS：float的更多相关文章

轻轻松松学CSS:媒体查询
轻轻松松学CSS:利用媒体查询创建响应式布局媒体查询,针对不同的媒体类型定制不同的样式规则.在网站开发中,可以创建响应式布局. 一.初步认识媒体查询在响应式布局中的应用下面实例在屏幕可视窗口尺寸大 ...
轻轻松松学CSS:Grid布局
网页布局总的来说经历了以下四个阶段: 1.古老的table表格布局,现在基本已被淘汰. 2.float浮动布局(或者position定位布局),借助float.position 等属性等进行布局,这种 ...
轻轻松松学CSS：position
position属性表示元素的定位类型,在CSS布局中,position发挥着非常重要的作用,一些元素的布局就是用position完成的,鉴于此,本文结合一些小实例详细讲解一下. position属性 ...
轻轻松松学CSS:background
background是复合属性,它可以分解为8个属性,其中5个属于CSS,另外3个属于CSS3一.CSS 1.background-color:背景色 2.background-image ...
轻轻松松学CSS:overflow
一.overflow的定义 overflow,音[əʊvəˈfləʊ],义[溢出],就像2.2米的人躺在1.8米的床上,腿得耷拉到床外一样.overflow 属性用于控制内容溢出容器时显示的方式二. ...
轻轻松松学CSS:Flex布局
Flex布局就是"弹性布局",它可以简便.完整.响应式地实现各种页面布局.引入弹性布局的目的,当页面需要适应不同的屏幕大小确保元素拥有恰当的布局方式,对一个容器中的子元素进行排列 ...
对css float 浮动的学习心得
css float浮动详解 @(css float)[hasLayout|clear float|妙瞳] css float的定义和用法 float 属性定义元素在哪个方向浮动.以往这个属性总应用于图 ...
[CSS]float&clear浮动
CSS float 属性浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止. 由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样. 可取的值 ...
[转] CSS float 浮动属性
http://www.cnblogs.com/polk6/p/3142187.html CSS float 浮动属性本篇主要介绍float属性:定义元素朝哪个方向浮动. 目录: 1. 页面布局方式: ...

随机推荐

GLIBC_2.18 not found 之类的问题解决办法
先到 /usr/lib64 下 ll libstdc++* 会发现 libstdc++.so.6 指向了一个新的.比如我这里之前指向6.0.22这个版本,报错此时只要重新建立软连接将软连接指向旧的 ...
jmeter分布式踩得坑汇总
一.普通的配置文件基本都能网上搜索资料,这里就简单记录: a.jmeter.properties几处修改:1.remote_hosts=master压力机Ip;2.server_port,开启服务器端 ...
Hibernate配置文件和映射文件详解
Hibernate是一个彻底的ORM(Object Relational Mapping,对象关系映射)开源框架. 我们先看一下官方文档所给出的,Hibernate 体系结构的高层视图: 其中PO=P ...
IIS站点管理-IIS站点以管理员身份或指定用户运行
PS:概要.背景.结语都是日常“装X”,可以跳过直接看应用程序池设置环境:Windows Server 2008.阿里云ECS.IIS7.0 概要 IIS应用程序默认情况下,是使用内置帐户运行的,权 ...
IDEA 非常重要的一些设置项 → 一连串的问题差点让我重新用回 Eclipse ！
开心一刻建筑行业内,我看过的最凶残笑话(IT行业内好一致!) 上联:一天晚上两个甲方三更半夜四处催图只好周五加班到周六早上七点画好八点传完九点上床睡觉十分痛苦下联:十点才过九分甲方八个短信七个电话 ...
解Bug之路-dubbo流量上线时的非平滑问题
前言笔者最近解决了一个困扰了业务系统很久的问题.这个问题只在发布时出现,每次只影响一两次调用,相较于其它的问题来说,这个问题有点不够受重视.由于种种原因,使得这个问题到了业务必须解决的程度,于是就到 ...
Who Am I? Personality Detection based on Deep Learning for Texts 阅读笔记
文章目录源代码github地址摘要 2CLSTM 过程 1. 词嵌入 2. 2LSTM处理 3. CNN学习LSGCNN学习LSG 4. Softmax分类源代码github地址 https:/ ...
《JavaScript语言入门教程》记录整理：面向对象
目录面向对象编程实例对象与 new 命令 this关键字对象的继承 Object对象的方法严格模式(strict mode) 本系列基于阮一峰老师的<JavaScrip语言入门教程> ...
微信小程序扫码解析小程序码
通过微信扫小程序码,跳转到应用小程序内, 如何解析小程序码的参数呢? 一般小程序码会跳转到设置的页面,如首页, 可以直接跳转到小程序首页,然后解析小程序携带的参数,再打开某个页面. (小程序码的路径要 ...
windows安装cnpm步骤
1.首先前往nodejs官网下载nodejs 2.安装nodejs 3.打开cmd,输入npm -v,检查npm是否安装成功.成功返回的话返回输出版本号 4.安装cnpm,输入npm install ...

轻轻松松学CSS：float

轻轻松松学CSS：float的更多相关文章

随机推荐

热门专题