我们知道css中最重要的就是浮动了，一张网页结构布局，用的最多的就是浮动了，现在大多数的网站网页结构都是浮动布局了，不像早些年的表格布局。所以学好浮动对我们的开发很重要。
浮动是什么？可能很多人的理解都不一样，我们来看看w3c对浮动的解释是什么
大多数小伙伴听得最多的可能就是浮动流，下面我们就来讲讲什么是浮动流以及清除浮动。
首先，我们知道，在一张网页中的正常布局流向（排列方式）都是从左到右，从上到下的方式排列。这个我们称之为标准文档流。那什么是浮动流呢？
浮动浮动浮动 ==> 因为有个浮字，我们可以理解为浮起来了一样。就好比标准文档流在地下排流，浮动流在天空上排流。简单看个例子。
这是两个正常排列的div，div独占一行，就不用多说了吧。然后我们给小的方块加一个浮动
然后我们再看效果
然后我们就看到大方块在小方块下面，因为小方块跑天上去了，它就不占据原来的位置，会把那个位置空出来，所以大方块会窜上去，就看起来两个方块重叠了。
在看另外一个例子，子级浮动，父级高度撑不开的问题，这也是浮动带来的一个不好的影响，平常写代码的时候会经常遇到这个。
一个ul标签，下面两个li标签，然后给ul加一个边框 便于观看。
保存运行看下正常效果
然后我们给li标签浮动
效果如下
这下我们看到ul的高度没有了，上下边框紧紧挨着，这就是刚刚上面说的浮起来的状况，因为子级li标签浮动起来了，它不占据原来的位置，它已经在天上了，所以它的父级ul标签包不住它，撑不起来高度，才会产生这种状况。
那我们要怎么解决这种现象呢。就是清除浮动。
大致分为4种方案：
1、在并列的子元素，最后加一个元素，给他加clear：both
2、给父子加一个class： clearfix
.clearfix::after{
content: '';
clear: both;
display: block;
}
3、让父级触发BFC效果
position:absolute
display:inline-block
float：left|right
overflow：hidden
4、如何浮动的父级本身就是浮动元素吗，那么不用清除浮动了
咱们就来给父级触发BFC效果看一下。
看效果
现在父级就把子级包裹住了，高度也有了。
有什么问题可以点一下关注，私信小编。