浮动(float)是 CSS 定位属性。浮动元素从网页的正常流动中移出,但是保持了部分的流动性,会影响其他元素的定位(比如文字会围绕着浮动元素)。这一点与绝对定位不同,绝对定位的元素完全从文档流中脱离。
CSS 的clear 属性通过使用left 、right 、both ,让该元素向下移动(清除浮动)到浮动元素下面。
如果父元素只包含浮动元素,那么该父元素的高度将塌缩为 0。我们可以通过清除(clear)从浮动元素后到父元素关闭前之间的浮动来修复这个问题。
有一种 hack 的方法,是自定义一个.clearfix 类,利用伪元素选择器::after 清除浮动。另外还有一些方法,比如添加空的<div></div> 和设置浮动元素父元素的overflow 属性。与这些方法不同的是,clearfix 方法,只需要给父元素添加一个类,定义如下:
.clearfix::after {
content: "";
display: block;
clear: both;
}
值得一提的是,把父元素属性设置为overflow: auto 或overflow: hidden ,会使其内部的子元素形成块格式化上下文(Block Formatting Context),并且父元素会扩张自己,使其能够包围它的子元素。
解析:参考
参与互动
51.请阐述z-index 属性,并说明如何形成层叠上下文(stacking context)
答案:
CSS 中的z-index 属性控制重叠元素的垂直叠加顺序。z-index 只能影响position 值不是static 的元素。
没有定义z-index 的值时,元素按照它们出现在 DOM 中的顺序堆叠(层级越低,出现位置越靠上)。非静态定位的元素(及其子元素)将始终覆盖静态定位(static)的元素,而不管 HTML 层次结构如何。
层叠上下文是包含一组图层的元素。 在一组层叠上下文中,其子元素的z-index 值是相对于该父元素而不是 document root 设置的。每个层叠上下文完全独立于它的兄弟元素。如果元素 B 位于元素 A 之上,则即使元素 A 的子元素 C 具有比元素 B 更高的z-index 值,元素 C 也永远不会在元素 B 之上.
每个层叠上下文是自包含的:当元素的内容发生层叠后,整个该元素将会在父层叠上下文中按顺序进行层叠。少数 CSS 属性会触发一个新的层叠上下文,例如opacity 小于 1,filter 不是none ,transform 不是none 。
解析:参考 1、参考 2、参考 3
|