（学习笔记）css--float浮动

1、为什么要浮动？

在默认模式下是标签执行的是标准流，块级元素独占一行，如div,p,h。哪怕通过display：inline-block，来改变成行内块元素，元素间依旧有白色的缝隙，影响布局效果。

当需要多个块级元素横向排列时，需要浮动来实现。

典型案例如下：

2、浮动属性

3、浮动特性

1）脱标以及不再保留原来的位置

如果没有加浮动，两个盒子默认的方式就是纵向排列。给粉色盒子加浮动后，就脱离标准流，浮起来，而且原来的位置没有了，那么蓝色的盒子就会根据标准流默认方式排列，把前面的空位置占了。就会形成这种叠加的效果。

2）浮动是顶端对齐的

3）浮动后具有行内块元素特点，既有宽高也能一行排列多个。

如果是样式里写了浮动，那么行内元素或者块级元素就不需要转换为行内块元素就可以直接给宽高。

如果块级元素没有设置宽度，则会默认跟父级元素一样宽，如果加了浮动后，就会根据自己内容的宽度定为自己的宽度，就跟行内元素一样。

浮动元素之间是没有缝隙的。

4、浮动典型运用方式

浮动元素经常跟标准流父级元素搭配使用。

5、浮动需要注意的点

1）浮动和标准流父级盒子搭配使用。

2）子元素浮动，那么跟它一样的兄弟姐妹都有一起浮动，前面一个是标准流，后面一个是浮动的，不会影响前面的位置，只会影响后面的位置。

 

6、清除浮动

1）为什么：有时候页面无法确定高度，后续可能随时添加信息，高度是不固定的，那么我们无法写固定的高度。如果父级盒子不写高度，而子元素是浮动的，浮动是不占有位置的，那么就会影响后面的布局。

 

2）如何清除浮动？

清除浮动后，父级盒子根据子元素的浮动高度而变化。

第一、额外标签法。

缺点：代码结构混乱。

注意：额外的标签必须是块级元素才可以，否则不起效果。

第二，父元素盒子加上overflow：hidden，auto，scroll都可以。

缺点：无法显示溢出的部分，溢出部分会被裁掉。

第三，：after伪元素法，原理就是在父盒子里的最后加一个阻隔，这样就可以不像第一种方法一样在结构最后加一个盒子，这样不影响页面结构。

给父盒子加上。

4）双伪元素清除浮动，对比第三种方法，除了在父盒子的后面加一个盒子，这种方法也会在父盒子前面加一个盒子。（比较推荐，真正做到闭合）

这些写法是固定的。

总之，当父盒子没有高度，子元素浮动，影响了后面的布局，就需要清除浮动。