css清除浮动的三种方法

一、浮动

块元素浮动向左向右，如果是行元素转成的行内块元素就只能从左开始，无法控制向左向右
float:  left   |   right
特点：
★元素浮动之后不占据原来的位置（脱离了默认文档流布局）
★浮动的盒子在一行上显示
★行内元素浮动之后转换为行内块元素。浮动脱离了文档流的元素会被文档流的块元素阻碍，
但是文档流的块元素不会被浮动元素阻碍（不推荐使用因为浮动元素已经脱离文档流布局了，
转行内元素最好使用display: inline-block;还在文档流布局中）

二、浮动的作用：
1.文本饶图
早期浮动就是用来让文字围绕的，浮动跟文字是不会重叠的记住了

2.制作导航

3.网页布局
注意点：
当父盒子没有定义高度，嵌套的盒子浮动之后，下边的元素发生位置错误。
◆清除浮动不是不用浮动，清除浮动产生的不利影响。
◆清除浮动的方法
clear: left  |  right  | both
工作里用的最多的是clear:both;
1.额外标签法（每次浮动都需要加一个额外div，浮动是很多的，所以不推荐）
 在最后一个浮动元素后添加标签。
 <div class="main">
   <div class="l-left"></div>
   <div class="c-main">
      <div class="c-top"></div>
      <div class="c-bottom"></div>
   </div>
   <div class="r-right"></div>
   <!--额外标签法，清除浮动-->
    <!--<div style="clear:both;"></div>-->
    </div>
2.给父集元素使用overflow:hidden;    bfc
  如果有内容出了盒子，不能使用这个方法。

 3、伪元素清除浮动法 ，浮动元素的父盒子调用伪元素清除浮动*/
    .clearfix:after{
         content: ".";
         display: block;
         height: 0;
         line-height: 0;
         visibility: hidden;
         clear: both;
      }
      !*兼容ie浏览器*!
      .clearfix{
         zoom:1;
      }*/

<div class="main clearfix">
   <div class="l-left"></div>
   <div class="c-main">
      <div class="c-top"></div>
      <div class="c-bottom"></div>
   </div>
   <div class="r-right"></div>

</div>