前端Day12

浮动

标准流

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


浮动的实质

word中图片和文字混排

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


float属性值

none:不浮动;

left:向左浮动;

right:向右浮动。


浮动特性

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

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

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

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

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

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容