浮动！你是什么鬼！
咳咳，明天来写一下CSS里的浮动，就是float，顾名思义，给某个元素加上浮动属性，就是飘起来了。
举个例子，文档流就是一个房子里，房子里有一些砖块，有的砖块加了浮动属性，它就飘起来了，飘起来后它本来的地位就会被没飘动的砖块代替，从屋顶往下看砖块，飘动的砖块可能会笼罩未飘动的砖块，就像把房子宰割成两层，隔层是通明的，最底下一层是一般文档流，飘动后就脱离了文档流，说的还是有些形象，（下图红色的砖块尺寸过大所以笼罩了根底文档流的元素） [灵魂画师哭了:( ]
Talk is cheap. Show me the code.
设置了三个盒子（div），div是块状元素，所以每个盒子独占一行，顺次向下排列。
<html> <head> <style>body { background-color: gray; } .red { width: 200px; height: 200px; background-color: red; } .blue { width: 100px; height: 100px; background-color: blue; } .green{ width: 50px; height: 50px; background-color: green; } </style> </head> <body> <div class="red"></div> <div class="blue"></div> <div class="green"></div> </body></html>效果图：
扩大1：给红色盒子加上浮动，让它飘起来。（float：left）
诶！蓝色盒子呢！别着急，想想结尾的例子，红色盒子尺寸比蓝色要大，而且红色盒子飘起来了！所以蓝色盒子和绿色盒子就往上挪动，加上红色盒子太大把蓝色盒子笼罩了！细心地同学会发现绿色盒子也被笼罩了一部分。咱们把红色盒子加上透明度看看蓝色盒子的真身吧！给红色盒子加了款式 opacity:0.2。
举个例子：原本小红 ，小蓝和小绿排队买货色（div块状元素），忽然小红说我不买了（float脱离文档流），而后小蓝和小绿就趁势补位了。
这个例子只能阐明蓝盒子和绿盒子补位。
再举个例子：原本小红，小蓝和小绿是共事，上下级关系是小红>小蓝>小绿，忽然有一天小红升职了（float），原本就只治理小蓝和小绿，当初要脱离原来的部门做更高的治理(脱离文档流)，而后小蓝和小绿就趁势补位。
效果图：
扩大2：给三个div都设置浮动（每个div的css款式里加float：left）
效果图：
给大家都加上左浮动后，大家就顺次浮起来靠左排列。
扩大3：给蓝色和绿色加上浮动，红色不动。
诶不是说好了脱离文档流吗！蓝色和绿色为啥不上浮笼罩红色！因为有一个束缚，红色在蓝色的后面，如果红色没有设置浮动，而上面的元素设置了浮动，蓝色就被红色顶着了，无奈飘动。
扩大4：给红色和绿色加上浮动
红色和绿色加了浮动后，蓝色就上移了，绿色仅挨着红色浮动，因为蓝色还是个div块状元素，所以绿色在上面。
效果图：
那么问题来了，怎么革除浮动呢？
等等作者，逻辑不对啊，为什么要革除浮动啊，浮动会有什么害处吗？
当然啦。
浮动导致的结果：
（1）因为浮动元素脱离了文档流，所以父元素的高度无奈被撑开，影响了与父元素同级的元素
（2）与浮动元素同级的非浮动元素会追随其后，因为浮动元素脱离文档流不占据原来的地位
（3）如果该浮动元素不是第一个浮动元素，则该元素之前的元素也须要浮动，否则容易影响页面的构造显示
咱们说的革除浮动是指革除因为子元素浮动带来父元素高度塌陷的影响。
办法一：在父元素的最初减少一个冗余的元素其款式并设置为clear:both
三个元素都设置浮动的代码：
原来的不浮动的时候，三个盒子垂直排列
<html> <head> <style> body { background-color: gray; } .red { width: 200px; height: 120px; background-color: red; } .father1 { width: 700px; margin: 0 auto; border: 10px solid blueviolet; } .blue { width: 100px; height: 100px; background-color: blue; } .green { width: 50px; height: 50px; background-color: green; } </style> </head> <body> <div class="father1"> <div class="red"></div> <div class="blue"></div> <div class="green"></div> </div> </body></html>效果图：
上面咱们给三个盒子加上浮动（三个盒子的款式里加上：float：left）
效果图：
瞧瞧父元素失去了价值！诶！父元素不是须要蕴含子元素的嘛！？因为三个盒子脱离了文档流，相当于父元素里的子元素跑了，边框就合并了。
解决方案一：在父元素的最初减少一个冗余的元素其款式并设置为clear:both
<html> <head> <style> body { background-color: gray; } .red { width: 200px; height: 120px; background-color: red; float: left; } .father1 { width: 700px; margin: 0 auto; border: 10px solid blueviolet; } .blue { width: 100px; height: 100px; background-color: blue; float: left; } .green { width: 50px; height: 50px; background-color: green; float: left; } .clear { height: 0px; clear: both; overflow: hidden; } </style> </head> <body> <div class="father1"> <div class="red"></div> <div class="blue"></div> <div class="green"></div> <div class="clear"></div> </div> </body></html>效果图：
父元素：拿来把你盒子们！哈哈哈！谢谢你啊clear：both兄弟！然而你太麻烦了噢
clear:both说：“先别动让我走，让我说说我的原理！当我老父亲里的三个盒子都离家出走后，它的高度就变成0了，然而我还是一个孩子呀！我还没离家出走呀！我只能避开三个哥哥们的空间往下走，而后就被老父亲发现了，它还要来用边框包裹住我！哼！这样三个哥哥们也跑不了了！然而不举荐用我这个办法，因为要减少个冗余的标签，呜呜我就是个野孩子！拜”
哦对了对了，clear其实只设置一个款式就行clear:both，下面写了三个hhh
办法二：BFC思维，让父元素成立一个BFC区域
很简略只有给父元素的款式加上overflow:auto或者overflow:hidden就好啦！
效果图：
办法三：采纳伪类:after，给父元素增加一个新的款式。
.clearbox:after { display: table; /*防止浏览器兼容问题 */ content: ''; clear: both; }<div class="father1 clearbox">总结
1、浮动是什么？
为了让元素脱离文档流，给元素加上款式float：left或float：right。
2、浮动可能会带来的问题是？
（1）因为浮动元素脱离了文档流，所以父元素的高度无奈被撑开，影响了与父元素同级的元素。（子元素设置为浮动的状况）
（2）与浮动元素同级的非浮动元素会追随其后，因为浮动元素脱离文档流不占据原来的地位
（3）如果该浮动元素不是第一个浮动元素，则该元素之前的元素也须要浮动，否则容易影响页面的构造显示
3、如何革除浮动？
（1）增加一个冗余的标签<div class ="clear"></div>
其款式设置为
height: 0px; clear: both; overflow: hidden;（2）给父元素增加伪类款式
<div class="father clearbox"></div>.clearbox:after { display: table; /*防止浏览器兼容问题 */ content: ''; clear: both; }（3）给父元素设置款式overflow:auto或overflow:hidden将父元素划到一个BFC区域