CSS浮动

HTML流式布局：从左向右，由上往下排布

总结：浮动的元素会不占据标准流的空间，但是会影响标准流中的文本排版。

float属性：

left     元素向左浮动

right   元素向右浮动

none     默认值，元素不浮动

浮动的特性：

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

2.浮动元素A的排列位置。如果A的上一个元素有浮动，则A元素的顶部和上一个元素顶部对齐。如果上一个元素为标准流，则A元素的顶部会紧挨着上一个元素的底部。

3.一个父盒子里的子盒子，如果有一个浮动，则其他子集也需要浮动才能对齐显示。

4.浮动根据书写位置显示

5.当元素设置浮动，没有设置宽高，元素根据内容大小决定大小，具有包裹性

6.浮动具有破坏性。元素浮动以后，就不再占据原始文档流，就会造成文档流塌陷。

文档塌陷的解决办法：

overflow： hidden；       超出部分进行隐藏

overflow属性：

visible     内容不会被修剪，会呈现在元素框之外（默认值）

hidden    溢出内容进行修剪，并且被修剪的内容不可见。

auto      在需要时产生滚动条，即自适应所显示内容

scroll    溢出内容会被修剪，且浏览器会始终显示滚动条。

CSS布局高级

版心的概念：网站的核心展示区域一般居中显示，版心宽度的PC端一般是960px，980px，1000px，1190px，1200px

自适应布局方式：

clear: both;     清除浮动：就是让当前元素左右元素都不存在浮动的时候，才放在标准流中显示