元素浮动信息安全技术应用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《前端技术开发》