CSS浮动笔记

一、标准流

标准流实际上就是一个网页内标签元素正常排列的顺序的意思；比如块级元素会独占一行，行内元素会按顺序依次从左向右，从上向下排列；按照这种大前提的布局排列之下绝对不会出现列外的情况叫做标准流布局，也称做流式布局。

二、元素的浮动属性float

1、定义:元素的浮动是指设置了浮动属性的元素会脱离标准文档流的控制，移动到其父元素中指定位置的过程。

2、定义浮动：选择器{float:属性值;}

属性值:left,向左浮动；right：向右浮动；none：没有浮动（默认值）

3、浮动的特性

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

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

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

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

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

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

三、父容器高度塌陷

1、如果一个标准流中的盒子所有的子元素都进行了浮动，而且盒子没有设置高度，那么父容器整个高度会塌陷。

2、overflow属性应用

选择器{overflow:属性值;}

�属性值:

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

hidden：溢出内容会被修剪，并且被修剪的内容是不可见的

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

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

四、应用布局和版心

“版心”是指网页中主体内容所在的区域。一般在浏览器窗口中水平居中显示，常见的宽度值为960px、980px、1000px等。

布局流程:

1、确定页面的版心(可视区)

2、分析页面中的行模块以及每个行模块中的列模块；

3、运用盒子模型的原理，通过DIV+CSS布局来控制网页的各个模块