IE浏览其中float布局中的文档流,浮动,定位和清除浮动(clearfix)详解

CSS学习中,文档流、浮动、定位、clearfix等概念很重要。
让我们深入理解这些概念:文档流是网页的基础,元素默认遵循它,由块元素和内联元素组成。
在HTML5中,它们是通过显示属性来区分的,例如块元素(举例)和内联元素(举例)。
display:inline-block具有两者的属性。
有两种方法可以从文档流中删除元素:浮动和定位。
浮动元素会立即离开文档流,影响周围元素的布局,例如文本周围的图像。
如果浮动元素的宽度和高度没有设置,可能会导致块元素塌陷。
这种情况就必须使用clearfix技术来解决。
定位元素通过position属性改变其在页面上的位置,如静态、相对、绝对和固定。
相对定位元素相对于其原始位置,但不脱离文档流绝对和固定使其松散,绝对取决于最近定位的祖先元素,而固定是固定在浏览器窗口中。
z-index属性用于控制堆叠上下文。
放置物品会提升等级。
但需要注意的是,未放置元素的z-index不会影响其显示。
浮动和文档流崩溃问题可以通过在父元素中添加clearfix类来解决,以保持页面布局的完整性。

CSS里面背景图像使用background-position定位显示的时候怎么才能让背景平铺?

使用以下格式的background-size属性:background-size:length|percentage|cover|contain;length指定背景图像的高度和宽度。
第一个值指定宽度,第二个值指定高度。
如果仅给出一个值,则另一个值设置为自动,百分比将计算定位区域占背景的百分比。
第一个值指定宽度,第二个值指定高度。
如果仅给出一个值,则另一个值设置为“自动”覆盖,这将保持图像的宽高比并将图像缩放到完全覆盖背景位置区域的最小尺寸。
contains现在保持图像的纵横比,并将图像缩放到适合背景位置区域的最大尺寸。