前端Day12

浮动

标准流

标准流就是浏览器默认布局的方式，也就是从上往下，从左向右的默认的排版布局的方式。

浮动的实质

word中图片和文字混排

浮动（float），浮动的盒子可以向左或向右移动，直到它的外边缘碰到包含盒子或另一个浮动盒子的边框为止。

float属性值

none：不浮动；

left：向左浮动；

right：向右浮动。

浮动特性

1.浮动脱离标准流，不占位置，但会影响标准流。浮动只有左右浮动。

2.浮动的元素A排列位置，跟上一个元素（块级）有关系。如果上一个元素有浮动，则A元素顶部会和上一个元素的顶部对齐；如果上一个元素是标准流，则A元素的顶部会和上一个元素的底部对齐。

3.一个父盒子里面的子盒子，如果其中一个子级有浮动的，则其他子级都需要浮动。这样才能一行对齐显示。

4.浮动根据元素书写的位置来显示相应的浮动。

5. 元素添加浮动后，如果没有设置宽高的话，元素会具有行内块元素的特性。元素的大小完全取决于定义的大小或者默认的内容多少。也就是具有了包裹性。

6.浮动具有破坏性，元素浮动后，破坏来原来的正常流布局，造成内容塌陷。