一，浮动的定义

一个浮动盒会向左或向右移动，直到其外边（outer edge）挨到包含块边沿或者另一个浮动盒的外边。如果存在行盒，浮动盒的外top（边）会与当前行盒的top（边）对齐。如果没有足够的水平空间来浮动，它会向下移动，直到空间合适或者不会再出现其它浮动了

因为浮动（盒）不在普通流内，在浮动盒之前或者之后创建的未定位的（non-positioned）块盒会竖直排列，就像浮动不存在一样。然而，接着浮动盒 创建的当前及后续行盒会进行必要的缩短，为了给浮动（盒）的margin box让出空间。

二，浮动的例子

浮动的定义很枯燥，下面我们通过几个例子，来理解浮动的概念。

1.浮动盒放不下会换行demo

    
  
     
      1
     
  
     
      2
     
  
     
      3
     
    

执行结果

所有盒子都会向左浮动，直到外边沿挨着块边沿。由于容器宽度不够，box3放不下，就只能向下移动最左边

2.被卡住

demo

    
  
     
      1
     
  
     
      2
     
  
     
      3
     
    

执行结果

由于box1的高度比box2的高，box3在向下向左移动的时候，遇到了box1的外边沿，就停止移动了。

3.浮动和文本

demo

    
  
     
      1
     
  
     
挨到包含块边沿或者另一个浮动盒的外边。如果存在行盒，浮动盒的外top（边）会与当前行盒的top（边）对齐如果没有足够的水平空间来浮动，它会向下移动，直到空间合适或者不会再出现其它浮动了
  
     
      2
     
  
     
      3
     
    

执行结果

我们给p段落加上背景色，发现p段落是看不见浮动元素的，但里面的文字是可以看见浮动元素的。当一个普通元素遇到一个浮动元素，普通元素是看不见浮动元素的。但里面的行盒是可以看见浮动元素的，行盒会缩短并给浮动元素让位。

写一下我理解的行盒的概念。行盒就是 line-box，也就是一个块级元素展示出的每一行就是一个行盒。块级元素内展示在一行的所有元素共同构成了一个行盒。比如下图的img和span1构成一个行盒，剩下2个span和button构成另外一个行盒。当页面面积发生改变，每行的内容变化，行盒的内容也会变化。

这里有一篇写行盒(line box)垂直方向的文章

4.浮动会脱离普通流

普通流中所遵循的规则是块级元素占据一行，行内元素占据内容的宽度。所有元素从上到下依次排列，普通元素可以把父元素的内容撑开。但浮动元素脱离了普通流，元素不是一个个从上到下排列的，浮动元素也不能把父元素撑开，因为父元素压根就看不见浮动元素。demo

5.块级元素设置浮动之后，宽度会收缩，宽度由内容决定。

行内元素设置浮动之后，可以设置宽高，内外边距。感觉有点像inline-block的特性

  
    
     这是div
    
  这是span    

执行结果

当我们取消浮动，结果是div占据一整行，span不能设置宽高和内外边距。

6.用浮动设置一个简单的导航栏

    
    
     
      
      
1首页
      
      
2产品
      
      
3服务
      
      
4关于
    
     
      
    

三，浮动的副作用

1.对后续元素位置产生影响

demo：

    
    
     
      侧边栏固定宽度
     
    
     
      侧边栏固定宽度
     
    
     
      内容区块自适应宽度
     
      
    
  
    
     我是 footer，但我的样式出现了问题
    
    

执行结果：

由于浮动元素脱离普通文档流，导致浮动元素后面下一个元素footer的排列会出错。

（2）父容器高度计算出现问题

父元素看不到浮动元素，如果父元素没有设置高度，浮动元素是无法撑开父容器的。demo/li里面的元素全部浮动的情况下，.navbar的高度为0，所以设置背景色无效

四：清除浮动

(1)clear属性

clear可以用于任何元素，无论是不是浮动元素都可以加。

• clear: left;

官方解释：要求该盒的top border边位于源文档中在此之前的元素形成的所有左浮动盒的bottom外边下方

不正经的理解：如果我前面有左浮动元素，我必须位于它的下方

• clear: right;

官方解释：要求该盒的top border边位于源文档中在此之前的元素形成的所有右浮动盒的bottom外边下方

不正经的理解：如果我前面有右浮动元素，我必须位于它的下方

• clear:both;

如果我前面有浮动元素，我必须位于它的下方

（2）封装一个clearfix的属性，用于父元素清除浮动

原理：父元素看不见元素，导致高度不正常。那我们就放一个普通元素在父元素的最后，把高度撑开。因用伪元素可以省一个标签，所以就用伪元素

.clearfix::after {  content:'';  //在父元素的最后生成一个内容为空的元素。  display: block; //生成的伪元素是内联元素，需要设置成块级元素来占位置啊  clear: both;  //把这个元素清除浮动，放在父元素的最下方，把父元素撑开}

使用：把.clearfix封装成一个属性，以后想要在哪里清除浮动，就给它的父元素加上.clearfix的属性。

demo

五：浮动和负margin

两个浮动元素，如果因放不下导致其中一个下移，对下移的元素设置负 margin 值。

当-margin加自身的宽度小于容器的宽度，可将其上移.如图所示，当box2的负margin为-2px，才能上移。

六：总结

1、浮动元素脱离了普通文档流，文档的普通流中的元素表现的就像浮动元素不存在一样，但文本可以看见浮动元素

2、设置浮动后行内元素拥有一些块级元素的特性，可以设置宽高margin 块级元素有了行内元素的特性，不再占据一整行，宽度决定于自身内容3、浮动元素不会将父容器撑开4、浮动元素左右浮动时遇到其他浮动元素会停止5、如果用了浮动，其父元素最好需要清除浮动