完全理解float之“不完全脱离文档流”

Posted 2023-03-05

参考技术A 完全理解float之“不完全脱离文档流” - CSDN博客

1、float的原始意义： 使文字环绕在图片周围，仅此而已。

      实现原理： float属性可以使图片（img）脱离文档流，但是它还占据正常文档流的文本空间，浮动                           后的图片可以浮在其他元素之上，但是图片不会遮挡文字，文字环绕在图片的周围。

2、float的2个属性

①包裹性：添加了float属性的元素会自动加上一个“块级框”，即可以设置元素的宽高。

                就float的包裹性而言，其实和display： inline-block；属性的效果是一样的。会在水平方向上排列，并且可以设置元素的宽高。唯一的区别就是：float是有方向性的，display: inline-block;是没有方向性的。

②破坏性：float属性破坏元素的inline-box模型，使之没有line-height值（文字环绕图片、父级元素的高度塌陷 问题）

3、float的应用：

      ①水平导航，图片水平摆放 

       当图片是等高等款的，float和dispay: inline-block;等效的。但是当图片的高度不相等时，最好使用display: inline-block;特性；水平导航时使用display：inline-block；由于空格符、换行符、制表符占据一定宽度，所以会有水平间距出现（解决多种方法。），此种情况最好使用float属性。

     ②分栏布局

         使用float+margin实现分栏布局

4、清除浮动

         因为float的破坏性，使元素的line-heigt的值为0，其腹父级获取不到高度，发生高度塌陷的问题。

清除浮动的方法： 

         a、利用clear属性清除浮动

         b、利用BFC原理包容浮动

         a类利用clear：both；属性清除的方法有添加空的div标签和属性的after伪类。