1.文档流一个文档就是一个网页。文档流位于网页底部。它代表页面中的一个位置。我们创建的元素默认在文档流中。浮动和定位可以打破文档流。文档流中元素的特点块状元素：1.块状元素在文档流中会占据一行，块状元素从上到下排列。2、文档流中块元素的默认宽度为auto（自动），也就是父元素的100%。3、文档流中块元素的高度默认为内容高度，即被内容拉伸，没有内容则为0。有内容就有内容。内联元素：1.内联元素在文档流中只占自己的大小，默认从左到右排列。如果一行内无法容纳所有的内联元素，它们就会换行，继续从左到右排列。2.在文档流中，内联元素的宽高默认是按内容扩展的。2、floating-浮动属性浮动属性可以使元素浮动，从而脱离文档流。可选值：none：默认值，元素默认排列在文档流中。right：元素立即离开文档流并浮动到页面右侧。left：元素立即离开文档流并浮动到页面左侧。特性介绍：当一个元素设置为float（非none值）时；该元素立即离开文档流。元素离开文档流后，其原来的位置将丢失，后面的元素将立即排在最前面。元素浮动后，会尝试浮动到页面的右上（right）或左上（left），直到遇到父元素或其他浮动元素的边框，而其上方本来就是块元素浮动元素，也就是不浮动，浮动元素不会超过块元素，也就是不会越过上一行。浮动元素不会超过其前一个浮动元素，最多和前一个在同一行（位置不够就换行），不会为空，因为后面还有块位置前一个浮动元素，因为它不能容纳前一个浮动元素，但它可以容纳原来的浮动元素，并且跨一个占据上边缘。浮动元素不覆盖文本，文本环绕元素。所以我们可以通过设置浮动来打造文字效果，而文字所在的块状元素不需要固定大小，让文字自由展开。一般没有固定宽高的块元素，其宽度默认占一行（父元素的100%），但设置为浮动后，其宽度和高度默认会被内容拉伸。无内容为0，行内元素离开文档流后会变成块元素。3.高度塌陷问题在文档流中，父元素的高度默认被子元素展开（默认不固定高度）。子元素的高度也是父元素的高度。但是有一种情况，当子元素设置为浮动时，就完全脱离了文档流。这时候子元素无法支撑父元素的高度（子元素离开文档流后不会保留原来的空间），所以父元素的高度塌陷了。父元素的高度塌陷后，其他元素上移，导致页面变得杂乱无章。如图：未设置float前：设置float后：明显父元素边框重叠，父元素高度塌陷。避免了高度塌陷的问题，但是当父元素的高度写死时，父元素的高度无法自动适应子元素的高度。所以不建议硬编码父元素的高度。解决方案：启用BFC原理：根据W3C标准，页面中的元素有一个隐藏属性Blockformattingcontext（简称BFC）。该属性可以打开或关闭。默认情况下，它是关闭的。我们需要开启它（不能直接开启）。当一个元素的BFC开启后，该元素将具有以下特点：1、父元素的垂直外边距不会与子元素重叠2、开启BFC的元素不会被浮动元素覆盖3.开启BFC的元素可以包含floats为子元素开启BFC的方法：设置元素为float；使用此方法启用BFC，虽然可以拉伸父元素，但是会丢失父元素的宽度（因为父元素是浮动的），并且会导致下面的元素向上移动，无法解决问题.设置元素的绝对定位；（稍后会详细介绍；）将元素显示设置为内联块；可以解决问题，但是会导致父元素的宽度丢失。不建议。将元素的溢出设置为不可见的值。（推荐，使用hidden副作用最小）Extension:ie6及以下不支持BFC。为了兼容ie6，需要用到这些版本ie6的另一个隐藏属性-----hasLayout；和BFC类似，最好的开启方式是设置缩放值，缩放表示放大元素（只有ie支持），值为1表示不缩放，其他设置宽度值也可以开启。缩放：1；5。清除浮动元素会导致下一个元素上移，即下一个元素受浮动元素的影响，清除浮动元素是消除浮动后前一个元素的影响。要清除元素，请使用clear属性。可选值：无：默认值；不要清除浮动；left：清除左侧浮动元素对当前元素的影响。清除浮动后，虽然之前的元素向左浮动，但自己的元素不会向上移动。right：清除当前元素向右浮动元素的效果。both：清除两侧浮动元素对当前元素的影响（本质是清除哪个浮动元素对自身的影响最大）。六、高度塌陷的最终解决方案（使用clear）1、添加div，直接在父元素末尾添加一个div。这个div没有设置浮动，所以靠这个div展开父元素，然后设置这个div清除浮动，clear:both;，就解决了父元素高度的塌陷。这种方法基本没有副作用（w3c推荐）。兼容所有浏览器。但是这种方法为页面添加了额外的结构，一个空的div。2、使用css中的after伪类，通过after伪类在父元素末尾添加一个空白块元素，然后清除浮动，解决父元素高度塌陷。原理和直接添加div是一样的，但是不会增加多余的结构，强烈推荐使用。.clearfix:after{/*这个clearfix类可以添加到任何高度折叠的元素中来解决问题*/content:"";/*添加一个空元素*/display:block;/*让它成为一个块元素*/clear:both;/*清除两边的浮动*/}/*一个更优秀的版本（即考虑高度塌陷和父子元素的垂直边距重叠）*/.clearfix:before,.clearfix:after{content:"";/*添加一个空元素*/display:table;/*让它成为一个块元素*/clear:both;/*清除两边的浮动*/}.clearfix{zoom:1;缺点：ie6不支持after伪类，需要hasLayout来处理。为了兼容ie6，需要这样写.clearfix{zoom:1;};7.Positioning定位：将指定的元素放置在页面的任意位置。也就是说可以通过定位的方式任意放置元素。如何设置？——通过position属性设置元素的定位。可选值：static：默认值，不启用定位。relative：启用元素的相对定位。absolute：开启元素的绝对定位。fixed：开启元素的固定定位。（特殊绝对定位）1.相对定位（输入多个div的技巧：div.box$*3——回车可以生成class值为box1到box3的三个div）当position属性设置为相对时值位置：相对；表示打开相对定位。注意：但启用元素相对定位后，如果不设置偏移量，元素不会发生变化。所以设置几个关于偏移量的值：left：元素相对于其定位位置的左偏移量。right：元素相对于其定位位置的右偏移量。top：元素相对于其位置顶部的偏移量。bottom：元素相对于其定位位置底部的偏移量。(通常只能用两个偏移量来定位元素，一横一竖)position:relative;left:200px;top:200px;relativepositioning是相对于原元素在文档流中的位置定位。相对定位不会脱离文档流，只是位置改变了，原来的位置依然保留。相对定位会将元素提升一个层次，即与其他元素重叠时会相互覆盖。相对定位不会改变元素的性质，block还是block，inline还是inline2.绝对定位当position属性设置为绝对值时，启用绝对定位。位置：绝对；绝对定位特性：开启绝对定位会使元素脱离文档流。启用绝对定位后，如果不设置偏移量（其实是有默认偏移量的，真正的原点是它原来位置的值），元素不会偏移，但会移动下一个元素，因为该元素不在向上的文档流中。绝对定位是相对于其最近的祖先元素定位的（也必须启用定位）。（一般情况下，如果我们启用了子元素的绝对定位，我们就会启用父元素的相对定位。）如果所有的祖先元素都没有启用定位，它们将相对于浏览器窗口定位，例如：左上角原点（left:0px,top:0px）为页面窗口的左上角。绝对定位会将元素提升一个层次。绝对定位会改变元素的性质（脱离文档流的原因），内联元素变成块元素，然后块元素默认被内容展开。3.固定定位当position属性设置为固定值时，启用固定定位。位置：固定；固定定位也是绝对定位的一种，其大部分特性与绝对定位相同。特殊点（不同的地方）：固定定位只是相对于页面窗口定位，与父元素是否启用无关。固定定位会固定在窗口的某个位置，不会随着窗口的滚动条消失。例如：有些视频，当你向下滚动网页时，视频窗口一直在播放，有些广告一直在你面前，你一动它就动，一直在屏幕原来的位置。IE6不支持，fixed定位等同于绝对定位。八、层级1、层级知识如果被定位的元素层级相同（设置了定位，但没有设置层级），下层元素会覆盖上层元素。元素的层级可以通过z-index属性设置。通过给z-index设置一个正整数作为值，该值将作为当前元素的层级。级别越高，优先级越高。（不设置的比默认设置的低。）没有开启定位的元素不能设置level，设置了也没用。不管父元素的层级有多高，都不会覆盖子元素，即子元素永远在父元素之上。2.透明设置opacity：用于设置元素背景的透明属性。它采用0到1之间的值来设置透明度。不透明度：1；不透明;不透明度：0；完全透明：0：完全透明；1：不透明；0.5：半透明；注意：不透明度在ie8及以下版本中不受支持。所以ie8及以下应该换成其他属性；filter滤镜属性，语法如下：filter:alpha(opacity=50);半透明需要取值0~100；0：完全透明，100不透明，50半透明。本文只总结了最常用的方法属性，但足够使用和入门了。更多属性可以在文档中查看。感谢阅读，希望有人能指出问题！
