DIV+CSS的布局元素.docx

浮动（float）：

1、不浮动（float:

none）：

这是元素的默认浮动值

2、左浮动（float:

left）：

向左浮动

3、右浮动（float:

right）：

向右浮动

4、继承（float:

inherit）：

使用父元素的 float 属性值,低于 IE8 不支持

5、清除左浮动（clear:

left）:

 元素左侧不允许出现浮动元素

6、清除右浮动（clear:

right）:

 元素右侧不允许出现浮动元素

7、清除两侧浮动（clear:

both）:

 元素两侧不允许出现浮动元素

8、清除浮动对于 block 元素才有意义，使block 元素与浮动元素之间折行布局

9、浮动元素对自身的影响：

浮动元素将按 inline-block 形式布局（haslayout），即使将他设置为 display:

inline;，因此，默认宽度自动扩展为100%的元素浮动之后，宽度由元素内容撑大，原来没有高宽属性的元素也变得可以定义高宽；如果出现重叠，浮动元素将叠加在非浮动的同辈元素之上（像是具有更大的z-index值）；在IE 67 ,子元素如果是浮动的，则其 margin-bottom 值被忽略；IE 6 下最靠边的一个浮动元素具有双边距，即 float:

left ，则最左边的浮动元素具有双倍 margin-left，float:

rigth 则最右边的浮动元素具有双倍 margin-right，加上 display:

inline 可以消除双边距BUG，而且浮动元素仍是块状布局。

10、浮动元素对同辈元素的影响：

浮动元素的布局是基于文档流的，不会完全脱离文档流，按元素节点在文档中出现的顺序，依次向float定义的方向浮动，直到遇到父元素边界或另一个浮动元素，浮动元素的垂直边距（margin）不会叠加；

可以认为父元素内存在正常文档流和浮动文档流（包括左浮动和右浮动），两条文档流出现交叉的时候，浮动文档流将被打断，但默认布局文档流不会被打断（IE6 7 会被打断），因此， display:

block 的非浮动子元素看起来像是默认具有 clear:

right 效果（block 的分行效果仍生效）。

因此，如果浮动元素在非浮动元素之前开始布局（按节点顺序），两条文档流就出现了重叠，如果没有设置z-index（注意 z-index 仅作用于 position 不是 static 的元素，且只影响同辈元素的层级关系），而且非浮动元素的 position 不是 static，则非浮动元素被浮动元素遮盖（IE 6 7 下不会，默认文档流被打断，而浮动元素不会导致分行，因此他们会布局在同一行），如果非浮动元素 position 是 static ，则浮动元素在上覆盖掉非浮动元素；

在IE 6 下，如果一个左浮动的元素紧跟着一个非浮动按 block 布局的元素，这两个元素不会重叠，而是布局在一行，而且两个元素之间有 3px 的间隔，消除3px BUG 方法是设置右侧的元素  position:

relative;left:

-3px; 

在同辈的浮动元素中，同向浮动的元素布局是有先后次序的；

不管浮动方向是否一致，如果父元素宽度不够，浮动元素会折行布局（不同浮动方向的元素不会因为父元素宽度不够而导致部分叠加）；

浮动元素不会对父元素外的元素产生影响。

11、浮动元素对父元素的影响：

浮动元素的父元素丢失 block 高度，即使定义了高度，也无法影响其同辈浮动元素及其浮动的子元素的布局，默认情况下，如果父元素没有定义高度，则父元素的内容会撑开父元素，达到自适应 block 高度的效果，浮动元素无法撑开其父元素的block 高度，因此，如果父元素的同辈元素有浮动属性，父元素内的子元素也有浮动属性，父元素也没有清除两侧浮动，则浮动的子元素和父元素的同辈浮动元素的关系看起来像是同辈的浮动元素一样，即，浮动元素会与非浮动且不脱离文档流的兄弟元素（及其后代元素）中所包含的浮动元素形成一个浮动文档流，这可能不是你想要的，于是，你需要做一些修补来使父元素的高度能够确定其 block 范围从而影响布局。

12、如何使浮动元素撑开父元素的高度：

将父元素设置成浮动可以使其默认高、宽自适应于其内容、插入一个空的子节点并设置该空节点为clear:

both 、设置父元素的 overflow 样式属性（不能是 visible）、设置父元素为 display:

inline-block ，

这几种方式可能带来你不想要的副作用，在低于IE 8 的IE 浏览器可以使用 zoom:

1 来实现而且没有副作用，

在 IE8 以上和firefox浏览器，使浮动元素撑开父元素高度又没有副作用反而变得不太可能，下面是一种方式使用伪元素来实现的修补

    .clearfix:

after {    

         content:

 "";

         display:

 block;     

         clear:

both;      

         height:

 0px;

         visibility:

 hidden;

         border:

0px none;

     } 

父元素应用 clearfix 类后可以被浮动的子元素撑开高度，其中伪元素的 content:

""、display:

 block 和 clear:

right 或 clear:

both 是必需的，另外几个样式是为了让伪类不被显示出来

这个方法会使父元素具有 clear:

right;的效果，但是，如果同样地设置 before 伪元素却不能使父元素具有 clear:

left 的效果；

    .clearfix:

before {

         content:

 "";

         display:

 block;

         height:

 0px;

         clear:

both;

         visibility:

 hidden;

         border:

0px none;

     }

因此，使父元素能被浮动子元素撑开又保持 block 块状布局的解决办法是，设置 .clearfix:

after 和 .clearfix{ clear:

both; zoom:

1; }

使父元素满足下面的条件的解决方法似乎没有（有知道的麻烦告知一下）：

保持 display:

block,clear:

left（ not both）;     

能被浮动子元素撑开高度

没有副作用（不增加额外元素，不使用 overflow,不使用 float, 可以利用伪元素）

给父元素设置 overflow（或 overflow-left 、 overflow-y） 是不错的选择，因为无论属性值是 auto 、scroll 、hidden 都可以达到修复目的，但是 visible 不行，默认情况下设置 overflow:

auto 即可。

13、position 对 float 的影响：

float可以说是定义同辈元素之间的位置关系，浮动元素相对于父元素，其位置的定义是确定不变的的：

基于position:

static/relative时的位置，向左侧或右侧靠近（一个可能的错误的认识是，浮动元素会向左上角或右上角浮动），因此，position:

static 和 position:

relative 与 float 的效果可以叠加， 但 position:

absolute、position:

fixed 这两个定位属性依赖于自身元素之外的参照，将使 float 的效果无法表现出来。

14、浮动元素对文本的影响：

浮动概念的基础是图文混排，因此同辈元素的在排版时如果浮动元素与非浮动元素之间发生覆盖，无论是谁覆盖谁，非浮动的元素内的文字将会被挤走，如下例：

relative;">float