2.27笔记

浮动

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

二,浮动布局方式浮动的本质：就是解决图片和文字并排的格式问题。

元素浮动后，会脱离标准流，但是还会影响标准流的布局。浮动的元素会不占据标准流的空间。但是会影响标准流中的文本的排版.

三,浮动的特性

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

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

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

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

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

6.浮动具有破坏性，元素浮动后，破坏来原来的正常流布局，造成内容塌陷。如果一个标准流的父盒子，没有设置高的情况下，所有的子盒子进行了浮动，那么父盒子的高度会塌陷成0.

四,解决浮动破坏性造成的高度塌陷的问题1,在父盒子上设置overflow： hidden；之后，父盒子具有的包裹性，就不会出现高度塌陷的问题了。