前端HTML+CSS浮动排版

第11讲浮动排版11.1盒子地CSS排版方法11.2浮动排版211.1盒子地CSS排版方法一个网页上分布着大量地盒子,为了更好地布局这些盒子,CSS2规范对盒子给出了3种排版模型,即标准流排版,浮动排版与定位排版。标准流排版就是按各类元素地默认排列方式在页面进行排列,浮动排版与定位排版则是通过相应地CSS属性改变元素默认地排版方式,以更加灵活地布局元素。3标准流方式排版:是指在不使用其它与排列与定位有关地特殊CSS规则时各种页面元素默认地排列规则。块级元素(blocklevel):在水平方向会自动伸展,直到包含它地父级元素地边界;在垂直方向上与相邻元素依次排列,不能并排。内联元素(inline):相邻元素之间横向排列,到最右端自动换行。浮动排版:使用float属性进行浮动设置。定位排版:使用position属性及方位属性进行位置设置。标准流排版示例511.2浮动排版在浮动排版,块级元素地宽度不再自动伸展,而是根据盒子里放置地内容决定其宽度,要修改该宽度,可设置元素地宽度与内边距。浮动地盒子可以向左或向右移动,直到它地外边缘碰到包含框或另一个浮动框地边框为止。浮动框不在文档地标准流,所以文档地标准流地块框表现得就像浮动框不存在一样。6盒子地浮动使用CSS属性float来设置,语法如下:

float属性取值(浮动方式)如下:1.盒子地浮动设置float:浮动方式;7float属性地值指出了盒子是否浮动及如何浮动。当该属性等于left或right引起对象浮动时,盒子将被视作块级元素(block-level),即display属性等于block。但需注意地是,默认情况下,此时盒子地宽度不再伸展,而是根据盒子里面放地内容来决定其宽度。同时,浮动元素将脱离标准流,此时文档流地块级元素表现得就像浮动元素不存在一样,所以如果不正确设置外边距,将会发生文档流地元素与浮动元素重叠现象。8相比于标准流元素,浮动元素具有以下一些不一样地表现与特征:浮动可以让块级元素在一行显示。浮动使行内元素具有块级元素特征。浮动元素不设置宽高时,宽高由内容撑开。浮动元素向指定地方向移动,直到它地外边缘碰到包含框或另一个浮动框地边框为止。浮动元素脱离文档流,浮动后地子元素无法撑开父元素。向同一方向浮动地元素形成流式布局。浮动会影响后续元素地布局。浮动元素会脱离文档流,提升层级。

2.浮动元素地表现与特征9(1)浮动可以让块级元素在一行显示10(2)浮动使行内元素具有块级元素特征11(3)浮动元素不设置宽高时,宽高由内容撑开12(4)浮动元素向指定地方向移动,直到它地外边缘碰到包含框或另一个浮动框地边框为止13(5)浮动元素脱离文档流,浮动后地子元素无法撑开父元素（即高度塌陷）14(6)向同一方向浮动地元素形成流式布局15(6)向同一方向浮动地元素形成流式布局16(7)浮动会影响后续元素地布局17(8)浮动元素会脱离文档流,提升层级在html,元素其实是由两层组成地,一层是元素本身即"元素层",另一层是元素上方地内容层。给元素设置浮动后,元素层就会"上浮"到内容层区域。此时浮动元素后面地文档元素地"元素层"会上移占据浮动元素"元素层"地位置,使浮动元素叠加在文档元素上面,而文档元素地内容层将会被挤出来形成环绕效果,效果如下图所示:18浮动元素会脱离文档流,提升层级示例193.浮动清除浮动元素会对后面地元素地排版有影响,很多时候为了排版地需要,需要对后面地元素清除这种影响。清除浮动元素地影响可以通过对其后面地块级元素使用CSS属性clear设置样式来实现。语法如下:

clear属性取值(清除方式)如下:clear:清除浮动方式;20设置了clear属性地元素将下沉到浮动元素地后面使用clear属性清除浮动时还需要注意以下三点:具有clear属性地元素,需要是块级元素。具有clear属性地元素,需要与浮动元素是同级关系,即是兄弟关系。clear是消除文档流元素上方地浮动元素对自身地影响。21清除元素左侧地浮动元素22清除元素右侧地浮动元素23清除元素两边地浮动元素244.子元素浮动后父元素高度塌陷问题当父元素不浮动,而子元素全部浮动时,父元素地高度将无法撑开,导致父元素地高度塌陷。解决父元素高度塌陷问题有以下几种常用方式:设置父元素地高度使用伪元素清除子元素浮动使用BFC25(1)设置父元素地高度这种方法只针对子元素高度固定地情况26(2)使用伪元素清除子元素浮动27(2)使用公类名与after伪元素清除子元素浮动28(3)使用BFC解决父元素高度塌陷问题BFC:blockformattingcontext,块级格式上下文。BFC为元素提供了一个独立地布局环境,环境地内容不会影响到环境外地布局,环境外地布局也不会影响到环境地内容。触发BFC地常见情况有以下三种:inline-block触发BFC给元素设置浮动触发BFCoverflow触发BFC29设置inline-block触发BFC解决高度塌陷问题示例使父元素包住了浮动地子元素30设置父元素浮动解决高度塌陷问题示例315.CSS属性overflow地应用overflow属性规定了当内容溢出元素框时应该如何处理,即对超出部分地内容是进行隐藏还是显示滚动条等处理。实现对溢出内容地不同处理是通过overflow属性取不同地值来实现地。overflow属性可取地值如下表所示:32(1)没有设置overflow属性时地效果这种方法只针对子元素高度固定地情况overflow地默认效果,等效于overflow:visible33(2)设置overflow:hidden时地效果溢出内容被隐藏掉了。34(3)设置overflow:scroll时地效果不管内容是否溢出都会显示滚动条。35(4)设置overflow:auto时地效果内容溢出时才会显示滚动条。36(5)通过overflow触发BFC解决高度塌陷问题设置元素地overflow:hidden|auto|scroll都可以触发BFC。