贵阳企业网站建设:CSS浮动在5个问题中解释-极简慕枫

贵阳企业网站建设:CSS浮动在5个问题中解释

2019-07-19

CSS“Floats”(浮动元素)使用简单,但一旦使用,它对其周围元素的影响有时会变得不可预测。如果你曾经遇到过消失附近的元素或漂浮的问题,像一个疼痛的拇指,不要再担心了。

这篇文章涵盖了五个基本问题,这些问题将帮助你成为浮动元素方面的专家。

1.哪些元素不浮动?

绝对的固定定位元件不会浮起来。因此,下次当您遇到一个不能工作的浮点数时,请检查它是否在position:absoluteposition:fixed并相应地进行修改。

2.元素漂浮时会发生什么情况?

当一个元素被标记为“浮动”时,它基本上会向左或向右运行,直到它。击中其容器元素的墙壁..或者,它将运行到击中另一个已经碰到同一墙的浮动元素。他们将继续堆积如山,直到空间耗尽,新的将被移动下来。

浮动元素不会凌驾于元素之上以前在代码中,在编写“浮动”代码之前需要考虑的一些问题。要将其浮动到其一侧的元素。


这里还有两件事情发生在浮动元素上,这取决于哪种类型的元素保持浮动:

(1) 内联元素将转换为块级元素。 浮时.

有没有想过为什么突然间你就能给漂浮的物体分配高度和宽度span?这是因为所有元素在浮动时都会得到值block因为它display属性(inline-tabletable)使它们阻塞级别元素。

贵阳企业网站建设

(2) 未指定宽度的块元素在浮动时会收缩以适应其内容。

通常,当不为块元素指定宽度时,其宽度是默认的100%。但是,当浮动时,情况就不再是这样了;块元素的框将缩小,直到其内容仍然可见。

3.“浮标”的兄弟姐妹怎么办?

当您决定在一组元素中浮动一个元素时,不要担心它将如何运行,它的行为将是可预测的,并且会向左或向右移动。你真正应该考虑的是它之后的兄弟姐妹们会怎么表现.

“漂流者”拥有全世界最关心和最顺从的兄弟姐妹。他们会尽全力容纳一个浮动的元素。

这个文本和内联元素只会为“浮标”让路,围绕“浮标”当它就位的时候。

这个块元素会走得更远把自己裹在“浮子”周围慷慨地,即使这意味着踢出自己的子元素,为“浮动”腾出空间。

让我们在一个实验中检验一下这个。下面是一个蓝色的盒子,后面是一个大小相同的红色盒子,里面有一些子元素。


联系电话 400-6065-301

微信咨询 寒总监