基本信息
文件名称:Web前端开发技术项目教程(HTML5 CSS3 JavaScript)(微课版) 课件 7.2.2知识点1:元素浮动.pptx
文件大小:14.72 MB
总页数:14 页
更新时间:2025-05-28
总字数:约1.33千字
文档摘要

元素浮动信息安全技术应用ApplicationofInformationSecurityTechnology《前端技术开发》

前端技术开发知识储备浮动设置1清除浮动2

01浮动设置前端技术开发

01浮动设置浮动属性语法:float:none|left|right值描述none默认值,不浮动,元素处在标准流中left向左浮动right向右浮动在标准流中,一般情况下一个块级元素在水平方向上会自动伸展,直至父元素的边界,而在垂直方向上则会和兄弟元素依次上下排列,但不能并排。使用浮动后,块级元素将改变自身行为。设置浮动之后,这些元素将脱离标准流,这样会影响后续元素的显示位置。说明:

01浮动设置将块级元素设置向左浮动从左到右排列,元素宽度变为内容大小块级元素上下排列float:left;这些元素将脱离文档流,仍在文档流中的父元素和后续元素会认为这些“不存在”。

01浮动设置将块级元素设置向右浮动从右到左排列,元素宽度变为内容大小块级元素上下排列float:right;这些元素将脱离文档流,仍在文档流中的父元素和后续元素会认为这些“不存在”。元素会向其父元素的右侧靠紧,观察设置了向左浮动和向右浮动元素的排列顺序。

01浮动设置浮动设置对相邻元素的影响-块级元素例如:后续元素是块级元素段落p相邻元素段落p浮动元素div前面的div元素设置向左浮动后,后续的段落元素会发生空间上的重叠,段落元素在div元素下方显示,同时段落文字会在div元素右侧呈现挤出效应。div…/divp…/p

01浮动设置浮动设置对相邻元素的影响-行内元素例如:后续元素是行内元素span相邻元素span浮动元素div在标准流中的相邻span元素会紧跟在浮动元素div的右边,当缩放窗口时,后侧的空间放不下span元素后,行内元素span会自动换行。div…/divspan…/spanspan…/span

01浮动设置浮动设置对父元素的影响例如:父元素是div元素,包含3个div子元素。子元素设置浮动后,脱离标准流,但父元素仍在标准流里,可以这样理解,父元素认为子元素“不存在”了,所以高度为0,只显示上下边框的高度。浮动子元素div外面父元素div设置浮动父元素div如何消除设置浮动后带来的“副作用”?

02清除浮动前端技术开发

02清除浮动清除浮动属性:clear:none|both|left|right值描述none默认值。允许浮动元素出现在两侧both在左右两侧均不允许浮动元素right在右侧不允许浮动元素left在左侧不允许浮动元素设置清除浮动clear属性的元素并不是清除本身元素的浮动效果,而是该元素在指定侧不与设置了浮动属性的元素在同一行显示。clear属性的取值

02清除浮动设置清除浮动将第2个div元素设置“clear:left”,表示第2个元素的左侧不允许出现浮动元素。如果将CSS语句设置为“clear:both”,第3个div元素是否会换行显示?

总结

感谢观看信息安全技术应用ApplicationofInformationSecurityTechnology《前端技术开发》