一.什么是浮动？为什么会脱离文档流？
首先了解一下文档流的概念，所谓文档流，就是指文档中可以显示的对象在排列时所占的位置。
而浮动就是使我们的元素脱离正常文档流，按照指定方向发生移动，直到碰到它的父元素边界或另一个浮动元素的边界，浮动是让元素水平方向移动，不能上下移动。当对某个元素设置了浮动(float)时，设置的元素就会脱离文档流，父元素和兄弟元素都会认为该元素不存在，兄弟元素会占据其位置，文本会留处其位置。
浮动特点：
1.使设置浮动的元素脱离正常文档流。
2.父元素和兄弟元素都会认为该元素不存在，兄弟元素会占据其位置，文本会留处其位置。
3.多个float元素默认会水平排列，如果父元素宽度容不下，则会换行。
4.如果子元素都浮动了，那么父元素的高度也就没有了。
5.行内元素设置浮动后会变成块元素(原因是脱离文档流)。
二.如何解决浮动问题。
设置浮动之前：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .main{ background-color: hotpink; } </style> </head> <body> <div class="main"> <div class="fl"> 宁静致远 </div> <div class="fr"> 宁静致远 </div> </div> </body> </html>
设置浮动之后：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .main{ background-color: hotpink; } .fl{ float: left; } .fr{ float: right; } </style> </head> <body> <div class="main"> <div class="fl"> 宁静致远 </div> <div class="fr"> 宁静致远 </div> </div> </body> </html>
这里可知道，设置浮动使得前两个脱离正常文档流，两个文字的背景颜色不见了，父元素的高度坍塌变成了0，影响与父元素同级的其他后续元素的正常布局。下面介绍解决方法：
方法1.给浮动元素父盒子设置固定高
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .main{ background-color: hotpink; height: 30px; } .fl{ float: left; } .fr{ float: right; } </style> </head> <body> <div class="main"> <div class="fl"> 宁静致远 </div> <div class="fr"> 宁静致远 </div> </div> </body> </html>
优点：简单直接解决问题；
缺点：此方法不够灵活，适用于高度固定的布局。
方法2.给浮动元素父盒子也添加一个浮动
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .main{ background-color: hotpink; float: left; } .fl{ float: left; } .fr{ float: right; } </style> </head> <body> <div class="main"> <div class="fl"> 宁静致远 </div> <div class="fr"> 宁静致远 </div> </div> </body> </html>
优点：简单直接解决问题；
缺点：会产生新的浮动，造成新的高度塌陷。
方法3.给父元素设一个overflow:hidden
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .main{ background-color: hotpink; overflow: hidden; } .fl{ float: left; } .fr{ float: right; } </style> </head> <body> <div class="main"> <div class="fl"> 宁静致远 </div> <div class="fr"> 宁静致远 </div> </div> </body> </html>
优点：代码整洁；
缺点：可能会导致内容显示不完全。
方法4.在浮动元素之后与浮动元素呈现并列关系的位置加上一个空的div（div本身不浮动，没有尺寸），并加个属性：clear:both;
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .main{ background-color: hotpink; /* overflow: hidden; */ } .fl{ float: left; } .fr{ float: right; } .cl{ clear: both; } </style> </head> <body> <div class="main"> <div class="fl"> 宁静致远 </div> <div class="fr"> 宁静致远 </div> <div class="cl"></div> </div> </body> </html>
注意事项：
如果子元素的浮动都为float:left;那么可以clear: left;
如果子元素的浮动都为float:right;那么可以clear:right;
它们的结果和clear: both;一样，所以，比较推荐加上clear: both;
优点：通俗易懂，书写方便；
缺点：代码冗余。
方法5.伪类消除法：给浮动元素的父元素添加一个伪类clearfix：
.clearfix::after{ content: ''; display: block; clear: both; }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .main { background-color: hotpink; /* overflow: hidden; */ } .fl { float: left; } .fr { float: right; } .clearfix::after { content: ''; display: block; clear: both; } </style> </head> <body> <div class="main clearfix"> <div class="fl"> 宁静致远 </div> <div class="fr"> 宁静致远 </div> </div> </body> </html>
优点：通俗易懂，书写方便，可重复使用此类，比较推荐这种方法。
