大学课程《Web前端开发与应用教程》PPT教学课件：项目五任务1 元素的浮动.pptxVIP

项目5浮动与定位

掌握元素的浮动12掌握元素的定位3理解DIV+CSS布局?学习目标掌握理解掌握

任务一元素的浮动

初学者在设计一个页面时，通常会按照默认的排版方式，将页面中的元素从上到下一一罗列。呆板不美观为元素设置浮动，可以使页面元素变得整齐有序。下面，将对元素的浮动进行详细讲解。

初学者在设计一个页面时，默认的排版方式是将页面中的标记从上到下一一罗列。如下图，通常这样的布局制作出来的页面看起来参差不齐。

大家在浏览网页时，会发现页面中的标记通常会按照左、中、右的结构进行排版，通常这样的布局会使页面变得整齐。如下图，就需要为元素设置浮动属性。

究竟是什么是浮动？应用排列图文排列论坛分享说到浮动，其实大家并不陌生

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

基本语法格式选择器{float:属性值;}属性值描述left元素向左浮动right元素向右浮动none元素不浮动（默认值）1.1元素的浮动属性

运行效果如图所示:

[点击操作演示]1.1元素的浮动属性由图可以看出，在未添加浮动属性前的布局样式，三个盒子依次由上而下排列，符合标准流的的布局效果。

接下来修改第一个盒子的样式代码，为其添加左浮动样式。1.1元素的浮动属性float:left;

运行效果如图所示:

[点