二零二三年 优质公开课元素的浮动.pptxVIP

《物联网Web前端开发基础》课程 元素的浮动 【任务3-5】元素的浮动需求分析什么是HTML？在网页中，页面元素是以默认的方向即从上到下、从左往右排列的。采用这种默认的文档流搭建的结构看。如果按照从上到下的默认方式进行排版，网页版面看起来会显得单调、混乱。通过引入CSS中的浮动样式可以进行更多样化的布局，将各部分模块有序排列，使网页的排版变得丰富、美观。 【任务3-5】元素的浮动知识储备—元素的浮动属性什么是浮动？ 【任务3-5】元素的浮动知识储备—元素的浮动属性所谓元素的浮动是指设置了浮动属性的元素会脱离标准文档流的控制，移动到其父元素中指定位置的过程。 【任务3-5】元素的浮动知识储备—元素的浮动属性基本语法格式选择器{float:属性值;}属性值描述left元素向左浮动right元素向右浮动none元素不浮动（默认值） 【任务3-5】元素的浮动知识储备—清除浮动为什么要清除浮动？ 【任务3-5】元素的浮动知识储备—清除浮动由于浮动元素不再占用原文档流中的位置，所以会对页面中其他元素的排版产生影响，如果要避免这种影响，就需要对元素清除浮动。 【任务3-5】元素的浮动知识储备—清除浮动如何清除浮动？ 【任务3-5】元素的浮动知识储备—清除浮动运用clear属性清除浮动基本语法格式选择器{clear:属性值;}属性值描述left不允许左侧有浮动元素（