css基础-float浮动

1. 浮动的前生今生
   浮动最初是为了文字环绕效果的，所以浮动元素不会遮住下面的图片和文字，但是绝对定位和固定定位会遮住　　
2. 什么是浮动
   创建浮动框，将其移动左或者右边，直到碰到左边缘或右边缘。
   特性：
   浮动元素会脱离标准流，
   浮动的盒子不会保留白原来位置
   一行内显示，顶端对齐
   行内元素加了浮动元素都会具有行内块元素，无需转换，可以设置高度和宽度。
3. 为什么要用浮动
   网页布局本质就是摆盒子，
   传统网页布局方式：
   a) 通过普通流标准流（块级元素，独占一行，从上往下），行内元素（从左到右排列）
   b) 定位
   c) 浮动
   
   
4. 为什么要清理浮动
   左浮动或者右浮动，盒子会浮起来，如果父盒子未设置高度，从而可能会导致父盒子高度为0，下面盒子会往上移，所以要清除浮动
5. 如果清理浮动
   清除浮动造成的影响, 元素有多高，父元素就会多高
   第一种：额外标签法
   

   <div>
   　　<div>float1</div>
   　　<div>float1</div>
   　　<div style="clear:both"></div>
   </div>

   第二种：给父元素添加overflow

   <div style="overflow:hidden">
   　　<div>float1</div>
   　　<div>float1</div>
   </div>

   第三种：通过:after伪元素，类似额外标签法，无需增加标签，使用css即可

   <div class='clearfix'>
   　　<div>float1</div>
   　　<div>float1</div>
   </div>
   
   <style>
    .clearfix::after{
           content: '';
           display: block;
           clear: both;
           height: 0;
           visibility: hidden;
       }
   <style>

   第四种：双伪元素清除浮动

   .clearfix::before,
       .clearfix::after {
           content: '';
           display: table;
       }
   
       .clearfix::after {
           clear: both;
       }

    

   
   总结：浮动在传统布局中占有举足轻重的作用，了解浮动的原理还是非常必要的。