宽度属性是否影响清晰? [英] Does width property affects clear?
问题描述
我试图理解浮动和清除.我有左浮动的DIV，然后右清除了
元素.
.container {
border: solid thin #ccc;
}
.left-segment {
float: left;
background-color: #8FC9FF;
height: 200px;
width: 200px;
}
.text-clear {
clear: right;
background-color: red;
}
<div class='container'>
<div class='left-segment'>I am LEFT DIV</div>
<p class='text-clear'>Hey There I am P with some so called DUMMY data. And Dummy data again</p>
它按预期工作. P元素占用div左浮点的空白空间.
但是现在我尝试为P元素增加宽度，而P元素正好出现在浮动DIV的下方
示例-
.container {
border: solid thin #ccc;
}
.left-segment {
float: left;
background-color: #8FC9FF;
height: 200px;
width: 200px;
}
.text-clear {
clear: right;
background-color: red;
width: 200px;
}
<div class='container'>
<div class='left-segment'>I am LEFT DIV</div>
<p class='text-clear'>Hey There I am P with some so called DUMMY data. And Dummy data again</p>
为什么宽度影响清晰?
首先，这里的clear没用，只是因为您正在清除权限并且已经使用了float:left.因此，如果您移除透明纸，您将获得相同的输出.
为了更好地了解正在发生的事情，让我们使float元素稍微透明一些:
.container {
border: solid thin #ccc;
}
.left-segment {
float: left;
background-color: #8FC9FF;
height: 200px;
width: 200px;
opacity: 0.5
}
.text-clear {
background-color: red;
width: 200px;
margin: 0; /*let's remove margin to avoid confusion*/
}
<div class='container'>
<div class='left-segment'>I am LEFT DIV</div>
<p class='text-clear'>Hey There I am P with some so called DUMMY data. And Dummy data again</p>
</div>
如您所见，红色div从容器顶部开始，而不是您可能认为的浮动元素下方.如果我们参考文档，我们可以看到:/p>
float CSS属性指定应放置一个元素 沿其容器的左侧或右侧，允许文本和 内联元素将其环绕.该元素已从 网页的正常流程，尽管仍然是流程的一部分 (与绝对定位相反).
因此，仅文本将环绕float元素，而不环绕整个block元素.换句话说，将红色div放置在容器的开头，宽度为200px，然后float元素位于其上方，并且将文本推到底部，因为它不能再将其推到左侧./p>
让我们添加一个动画，我们将更好地了解正在发生的事情:
.container {
border: solid thin #ccc;
}
.left-segment {
float: left;
background-color: #8FC9FF;
height: 200px;
width: 200px;
opacity: 0.5
}
.text-clear {
background-color: red;
width: 200px;
margin: 0;
animation:change 5s linear infinite alternate;
}
@keyframes change {
from {width:600px}
to {width:100px}
}
<div class='container'>
<div class='left-segment'>I am LEFT DIV</div>
<p class='text-clear'>Hey There I am P with some so called DUMMY data. And Dummy data again</p>
</div>
现在更加清楚的是，文本是如何围绕浮点数包装的，并尊重其容器的宽度.
现在，如果您清除左侧，则可以正确清除float元素，并且您的红色div将在其下方开始:
.container {
border: solid thin #ccc;
}
.left-segment {
float: left;
background-color: #8FC9FF;
height: 200px;
width: 200px;
opacity: 0.5
}
.text-clear {
clear: left;
background-color: red;
width: 200px;
margin: 0;
animation: change 5s linear infinite alternate;
}
@keyframes change {
from {width: 600px}
to {width: 100px}
}
<div class='container'>
<div class='left-segment'>I am LEFT DIV</div>
<p class='text-clear'>Hey There I am P with some so called DUMMY data. And Dummy data again</p>
</div>
I was trying to understand float and clear. I have DIV with float left and then
element cleared right.
.container {
border: solid thin #ccc;
}
.left-segment {
float: left;
background-color: #8FC9FF;
height: 200px;
width: 200px;
}
.text-clear {
clear: right;
background-color: red;
}
<div class='container'>
<div class='left-segment'>I am LEFT DIV</div>
<p class='text-clear'>Hey There I am P with some so called DUMMY data. And Dummy data again</p>
It worked as expected. P element occupied empty space left by div with left float.
But now i tried to add width to P element and P element appeared right below to floated DIV
Example -
.container {
border: solid thin #ccc;
}
.left-segment {
float: left;
background-color: #8FC9FF;
height: 200px;
width: 200px;
}
.text-clear {
clear: right;
background-color: red;
width: 200px;
}
<div class='container'>
<div class='left-segment'>I am LEFT DIV</div>
<p class='text-clear'>Hey There I am P with some so called DUMMY data. And Dummy data again</p>
Why width is affecting clear?
To start, the use of clear here is useless simply because you are clearing the right and you have used float:left. So you will have the same output if you remove the clear.
To better understand what is happening, let's make the float element a bit transparent:
.container {
border: solid thin #ccc;
}
.left-segment {
float: left;
background-color: #8FC9FF;
height: 200px;
width: 200px;
opacity: 0.5
}
.text-clear {
background-color: red;
width: 200px;
margin: 0; /*let's remove margin to avoid confusion*/
}
<div class='container'>
<div class='left-segment'>I am LEFT DIV</div>
<p class='text-clear'>Hey There I am P with some so called DUMMY data. And Dummy data again</p>
</div>
As you can see the red div start at the top of the container and not below the floating element as you may think. If we refer to the documenation we can read that:
The float CSS property specifies that an element should be placed along the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the web page, though still remaining a part of the flow (in contrast to absolute positioning).
So only text will wrap around the float element and not the whole block element. In other words, your red div is place at the beginning of the container with a width of 200px then the float element is getting above it AND it pushs the text to the bottom since it can no more push it to the left.
let's add an animation and we will better see what is happening:
.container {
border: solid thin #ccc;
}
.left-segment {
float: left;
background-color: #8FC9FF;
height: 200px;
width: 200px;
opacity: 0.5
}
.text-clear {
background-color: red;
width: 200px;
margin: 0;
animation:change 5s linear infinite alternate;
}
@keyframes change {
from {width:600px}
to {width:100px}
}
<div class='container'>
<div class='left-segment'>I am LEFT DIV</div>
<p class='text-clear'>Hey There I am P with some so called DUMMY data. And Dummy data again</p>
</div>
It's more clear now how the text is wrapping around the float and respecting the width of its container.
Now if you clear the left you will correctly clear the float element and your red div will start under it:
.container {
border: solid thin #ccc;
}
.left-segment {
float: left;
background-color: #8FC9FF;
height: 200px;
width: 200px;
opacity: 0.5
}
.text-clear {
clear: left;
background-color: red;
width: 200px;
margin: 0;
animation: change 5s linear infinite alternate;
}
@keyframes change {
from {width: 600px}
to {width: 100px}
}
<div class='container'>
<div class='left-segment'>I am LEFT DIV</div>
<p class='text-clear'>Hey There I am P with some so called DUMMY data. And Dummy data again</p>
</div>
这篇关于宽度属性是否影响清晰?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
