3-浮动介绍与整理

浮动

最早是用来实现文字环绕图片的；现在目的就是为了让多个块级元素在同一行上显示（同一行上显示以前用inner-block做的， 但是它实现不了 靠页面右边显示。还有一个是inner-block 是有缝隙的）

• 浮动特性：

浮: 加了浮动的元素盒子是浮起来的，漂浮在其他的标准流盒子上面。

漏: 加了浮动的盒子，不占位置的，它浮起来了，它原来的位置漏给了标准流的盒子。一种特殊的脱标

特: 特别注意，首先浮动的盒子需要和标准流的父级搭配使用，其次特别的注意浮动可以使元素显示模式体现为行内块特性。

​

浮动并不是完全意义上的脱标（文字不会被盖住 还有图片也是）

浮动的盒子跨越不 了 padding和border

另外：因为浮动是在原有位置基础上 浮动的( 三个div 中间一个不设置float：left 第三个不是接在第一个div后面的)

浮动有不好的地方：会影响后面的布局 ；给高度确实不影响后面的布局，但是也有的时候 父元素不方便设置高度的时候）

• 清除浮动：本质就是： 为了解决父级元素因为子级浮动而引起内部高度为0 的问题；

  清除浮动的四种方式：

    父元素设置高度，额外标签法，父元素设置overflow：hidden；伪元素清除浮动
  

  • 额外标签法： 在最后一个浮动元素的后面添加一个空盒子**（clear：both）**

  • 父元素添加overflow： 给overflow设置一个值 ： hidden auto 或者scroll

  • 伪元素清除浮动：原理还是额外标签法

    	.clearfix:after {  /*正常浏览器 清除浮动*/
       		content:"";
       		display: block;
      		height: 0;
       		clear: both;
       		visibility: hidden;
    	}
    	.clearfix {
       		*zoom: 1;  /*zoom 1 就是ie6 清除浮动方式  *  ie7一下的版本所识别*/
    	}
    

参考网址：https://blog.csdn.net/ParanoidYang/article/details/62062828