果冻公开课第六课：5分钟理解浮动布局
已认证的官方帐号
4 人赞同了该文章
浮动，是如何实现页面布局的呢？
它有哪些特质和使用方法？
今天，我们就用5分钟的动画短视频来深入浅出地理解浮动~
动画视频：
https://v.qq.com/x/page/q0842mu4v1d.html
果冻公开课：如何理解浮动布局？
文字解析：
网页儿也能这么图文并茂吗？
假设这里有一个标题、一幅画儿和一段文字
如果把这三个元素都设为块级元素，那么看起来将是这样的：
因为块级元素的特点是：
可以设置宽和高，但它会独占一行。
如果把后两个个元素都设为行内元素，那么看起来则是这样的：
因为行内元素的特点是：
可以多个元素手拉手站一行，挤不下时就新开一行继续挤
但是不能设置宽和高，只能被内部的内容撑开，就像气球一样，需要在里面充入空气才会拉伸开。
然而这样的效果依旧不是很好，因为图片作为行内元素和文字一样手拉手站一起排队
不过因为图片的又高又胖把整个空间撑大了，但这样并不会形成文字环绕的效果
所以应该怎么办呢？
还好这个世界上聪明人很多，有人想到了一个点子，设计这么一个属性：浮动
把需要被环绕的元素提起来，成为了一个高尚的元素一个脱离了低级趣味的元素：
脱离普通文档流浮起来，形成一条新的VIP队列停在普通元素上空。
不过这条队列是有限制的，它只能在父元素内浮动，而不是在整个页面里。
浮动后的元素很特殊，它们在布局的时候既像是块级元素，可以设置宽和高；又像行内元素，可以手拉手挤成一行。
同时可以设置它的浮动属性值为left或者是right，让它向左或者向右靠拢
一直到碰到它的父容器的边界或者是排在前面的元素才会消停。
而在浮动元素之后的普通元素则会装作浮动元素根本不存在的样子自顾自地布局。
这样在页面上看来：
浮动元素在上、普通元素在下，形成了两层叠放在父级容器当中，并且浮动元素会遮住普通元素。
不过普通文档流里的文本节点非常敏感：
它们会识别到浮在头顶的浮动元素，表示坚决不能屈居其下，于是都纷纷跑出来绕开它，成全了图文混排的需求。
比如这里有ABC三个块级元素，在没有浮动的时候它们看起来是这样的：
如果让B元素左浮动，它就被提起来放在左前方，后面的C元素挤上来当做B元素不存在的样子。
但是如果C元素中有文字，则会看到C元素中文字的位置被浮在上方B元素所占据，文字纷纷绕开，形成文字环绕的效果。
再比如这里有ABCD四个块级元素，在没有浮动的时候它们看起来是这样的：
A是大标题，B和C都是图片，D则是一大段文字。
我们让图片B和C一个左浮动一个右浮动，B和C形成新的VIP队列挨着前面的元素，浮起来停靠在普通元素上空。
D元素向上弥补了BC元素的空缺，正好被BC元素遮住，而D元素中的文字则是纷纷绕开BC元素
看起来则是这样的文字环绕效果。
不过这个世界上很多事情并不会总是沿着预想的方向进行下去
比如皇帝的炼丹师就没能想到他们的辛勤劳动成就了火药，而浮动的创造者也没想到最后成就了多列布局。
因为光是这样、以及这样的布局已经无法满足日益增长的上网人群
人们希望页面更丰富更好看，渴望看到这样的、这样的以及这样的布局
然而块级元素独占一行，行内元素又无法设置宽高。
于是又有人把主意打到了浮动身上：
可以设置宽和高，又能在一行内布局多个
虽然是个插队份子，但只要注意弹压普通元素的情绪，那它就是这个完美人选。
于是利用浮动，形成了一大波布局新浪潮：
基于浮动的三列布局
这种左右两边宽度固定，中间自适应的布局非常常见，实现的思路之一就是利用浮动。
在页面中编写3个DIV，分别为ABC，
首先设置A元素宽高并且左浮动
然后设置B元素宽高并且有浮动
最后是C元素作为一个普通块级元素保留在普通文档流当中
把浮动的A和B元素当做不存在，设置宽高后，看起来就是这样的：
为了让C元素中的所有元素都能在页面中展示出来，因此为C元素设置外边距，大于浮动的元素宽度
这就是利用浮动和margin错开布局的三列布局思路
怎么样是不是很简单？
赶紧上手写点代码练习一下吧~
更多内容，欢迎加大师姐微信：
入群了解课程动态、幕后花絮，还有机会参与到课程制作，成为联合制作人哟
记得备注来自果冻课堂
【更多内容，可以加入IT交流群565734203与大家一起讨论交流】
【这里是技能树·IT修真院：IT修真院官网，初学者转行到互联网的聚集地】