我正在学习使用 CSS float
属性。我想了解此属性的特定效果。
考虑以下简单的 HTML 元素:
<div id="div1">div1</div>
<div id="div2">div2</div>
<p>This is a paragraph</p>
以及以下 CSS 规则:
div {
height: 100px;
width: 100px;
}
#div1 {
background-color: blue;
}
#div2 {
background-color: red;
}
p {
background-color: green;
}
如果我float: left
#div1,#div2 不再可见(因为它现在隐藏在#div1 后面)。
如果我要 float: left
#div2,我希望该段落会发生类似的事情。
但事实并非如此。该段落的行为与 div 不同。它没有隐藏在#div2 后面,而是紧挨着它。
有人可以解释为什么会有这种行为差异吗?
谢谢。
编辑1:
这是 Stacksnippet,带有初始代码
div {
height: 100px;
width: 100px;
}
#div1 {
background-color: blue;
}
#div2 {
background-color: red;
}
p {
background-color: green;
}
<div id="div1">div1</div>
<div id="div2">div2</div>
<p>This is a paragraph</p>
这是在 #div1 CSS 规则中声明的带有 float: left 的片段。
div {
height: 100px;
width: 100px;
}
#div1 {
background-color: blue;
float: left;
}
#div2 {
background-color: red;
}
p {
background-color: green;
}
<div id="div1">div1</div>
<div id="div2">div2</div>
<p>This is a paragraph</p>
下面是我在 #div2 规则中使用相同声明时发生的情况:
div {
height: 100px;
width: 100px;
}
#div1 {
background-color: blue;
}
#div2 {
background-color: red;
float: left;
}
p {
background-color: green;
}
<div id="div1">div1</div>
<div id="div2">div2</div>
<p>This is a paragraph</p>
最佳答案
float 元素将使该元素脱离非 float 元素流。但是这些其他元素的TEXT会漂浮在 float 元素周围。试着让你的 div2 更大,并在里面放更多的文字,然后你就会明白我的意思了。
关于html - CSS float 属性 - float div 与 float 段落时的行为差异,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40599533/