我有三个div并且在第一个左边浮动.如果只有浮动元素设置了宽度,则另外两个将它环绕到右边.但是,如果我也为其他2个div设置了一个宽度,它们就不再包围第一个div,只是像正常的流式一样堆叠在下面.
我知道我需要将相同的浮点类添加到div 2和3以使它们浮动内联,但我很好奇为什么这个行为如果所有三个都有宽度(即使宽度加起来小于可用的宽度) broswer窗口宽度).这是代码:
<!DOCTYPE html>
<html>
<head>
<style>
.one {
background-color: steelblue;
padding: 10px;
width: 200px;
}
.two {
background-color: orange;
padding: 10px;
width: 200px;
}
.three {
background-color: red;
padding: 10px;
width: 200px;
}
.float {
float: left;
}
</style>
</head>
<body>
<div class="one float">
<p>I am paragraph one</p>
</div>
<div class="two">
<p>I am paragraph two</p>
</div>
<div class="three">
<p>I am paragraph three</p>
</div>
</body>
</html>