共计 3472 个字符，预计需要花费 9 分钟才能阅读完成。
浮动！你是什么鬼！
咳咳，明天来写一下 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 区域