网页设计与制作教程Web前端开发（第7版）课件：CSS3的盒模型-CSS布局属性.pptx

CSS为定位和浮动提供了一些属性，利用这些属性，可以建立列式布局，将布局的一部分与另一部分重叠。CSS3的盒模型CSS布局属性

目录CSS的盒模型6.1CSS盒模型的组成和大小6.2CSS盒模型的属性6.3CSS布局属性6.4CSS盒子定位属性 6.5CSS3多列属性6.6CSS基本布局样式 6.7实训——制作社区网网页6.8练习

6.3CSS布局属性6.3.1元素的布局方式概述1.一切皆为盒块级元素?“块盒子”（或称块框）。行级元素?“行级盒子”（或称行级框）。

6.3CSS布局属性2.CSS定位机制元素的布局方式，也称CSS定位机制，CSS有三种基本的定位机制：普通文档流、浮动和定位。（1）普通文档流（简称普通流）（2）浮动

6.3CSS布局属性（2）浮动

6.3CSS布局属性

6.3CSS布局属性3.布局属性CSS布局属性（LayoutProperties）是用来控制元素显示位置、文档布局方式的属性。按照功能可以分为如下三类。控制浮动类属性，包括float、clear属性。控制溢出类属性overflow。控制显示类属性，包括display，visibility属性。

6.3CSS布局属性6.3.2CSS浮动属性float语法：float:none|left|right|inherit示例：img{float:right}

6.3CSS布局属性【例6-12】浮动属性示例，本例文件6-12.html在浏览器中的显示效果，如图6-20所示。

6.3CSS布局属性!DOCTYPEhtmlhtmlheadmetacharset=utf-8titleCSS浮动/titlestyletype=text/cssimg{width:100px;height:60px;}/style/head

6.3CSS布局属性bodyp这里是普通文档流演示文字imgsrc=images/sunflower.jpg这里是普通文档流演示文字…这里是普通文档流演示文字…这里是普通文档流演示文字…这里是普通文档流演示文字…这里是普通文档流演示文字…/pp这里是浮动框外围的演示文字imgsrc=images/sunflower.jpgstyle=float:left;这里是浮动框外围的演示文字……这里是演示文字…这里是演示文字…这里是演示文字…这里是演示文字…这里是演示文字…这里是演示文字…/pp这里是浮动框外围的演示文字imgsrc=images/sunflower.jpgstyle=float:right;这里是浮动框外围的演示文字…这里是演示文字…这里是演示文字…这里是演示文字…这里是演示文字…这里是演示文字…这里是演示文字…这里是演示文字…/p/body/html

6.3CSS布局属性6.3.3清除浮动属性clear语法：clear:none|left|right|both|inherit示例：div{clear:left}

6.3CSS布局属性【例6-13】清除浮动属性示例，本例文件6-13.html在浏览器中的显示效果，如图6-23左图所示。

6.3CSS布局属性!DOCTYPEhtmlhtmlheadmetacharset=utf-8title清除浮动/titlestyletype=text/css.box{width:450px;height:200px;}.box_left{float:left;width:200px;background:aquamarine;}.box_right{float:right;width:200px;background:burlywood;}.clear{clear:both;}/style/head

6.3CSS布局属性bodydivclass=boxdivclass=box_leftimgsrc=images/sunflower.jpgstyle=width:150px;height:90px;