消除浮动，只需知道这么多
一.什么是浮动？为什么会脱离文档流？
首先了解一下文档流的概念，所谓文档流，就是指文档中可以显示的对象在排列时所占的位置。
而浮动就是使我们的元素脱离正常文档流，按照指定方向发生移动，直到碰到它的父元素边界或另一个浮动元素的边界，浮动是让元素水平方向移动，不能上下移动。当对某个元素设置了浮动(float)时，设置的元素就会脱离文档流，父元素和兄弟元素都会认为该元素不存在，兄弟元素会占据其位置，文本会留处其位置。
浮动特点：
1.使设置浮动的元素脱离正常文档流。
2.父元素和兄弟元素都会认为该元素不存在，兄弟元素会占据其位置，文本会留处其位置。
3.多个float元素默认会水平排列，如果父元素宽度容不下，则会换行。
4.如果子元素都浮动了，那么父元素的高度也就没有了。
5.行内元素设置浮动后会变成块元素(原因是脱离文档流)。
二.如何解决浮动问题。
设置浮动之前：
<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>
设置浮动之后：
<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.给浮动元素父盒子设置固定高
<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.给浮动元素父盒子也添加一个浮动
<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
<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;
<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;
}
<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>
优点：通俗易懂，书写方便，可重复使用此类，比较推荐这种方法。