CSS浮动原理

当多个div写在一起时，多个块级div会排列成一排。

浮动就可以设置div的左右位置

浮动元素的特性：

1.浮动元素会脱离标准流(脱标)

标准流：指的是在不使用其他的与排列和浮动、定位相关的特殊CSS规则时,各种元素的排列规则。      

脱流：使用了浮动、定位相关的特殊规则脱离了标准流的控制浮动到了指定位置。

2.浮动的盒子不再保留原先的位置

粉色为设置浮动之后的div

3.如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对齐排列。浮动的元素时贴靠在一起的 中间不会有缝隙。

4.浮动元素具有行内块元素特性

如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定 浮动的盒子中间是没有缝隙的，是紧挨着一起的 行内元素同理

浮动的应用

应用1.浮动和标准流的父盒子搭配使用。

应用2：让其中一个元素浮动到想要摆放的位置。

 

浮动现象的代码测试：