css文件是
#box {
width:400px;
height:200px;
border:1px solid black;
}
#box-1 {
width:100px;
height:100px;
background-color:red;
float:left;
}
#box-2 {
width:100px;
height:100px;
background-color:yellow;
}
</style>
</head>
<body>
<div id="box">
<div id="box-1">id=box-1</div>
<div id="box-2">id=box-2</div>
</div>
</body>
很明显box-2被box-1重叠了。
问题让我困惑:
1.box-1放在box-2之前的box中，为什么结果不是box-2重叠box-1？
2.为什么文本id=box-2不在box-2中？
如果 box-2 被 box-1 重叠并且文本 id=box-2 在 box-2 中，结果应该是
请告诉我css float rule的原理
最佳答案
float 不用于布局，仅用于 float 元素。这是因为你面临的问题，大多数用户不理解。
CSS float 的基本原理是属性脱离 float 元素的正常流动。此时，当你 float 一个元素时，它所在的行高将为零。我用一个例子来解释你:
.box {
position: relative;
border: 2px solid red;
clear:both;
margin-bottom: 40px;
}
.floated {
float:left;
}
.box > div {
border: 1px solid blue;
}<div class="box">
<div class="floated">Floated div</div>
</div>
<div class="box">
<div>Not Floated div</div>
</div>如您在示例中所见，红色边框模拟行高。您现在可以看到内容 .floated正在从容器中取出 .box ，多亏了这个盒子看起来没有高度并且似乎没有内容。您还可以看到 .box被清除以避免您面临的冲突。
让我们看另一个例子。 float 的一个常见用途是用于网格。我不赞同这种方法，但是发现这种程序很常见:
.grid {
position: relative;
width: 400px;
}
.grid.floated .element {
float: left;
width: 32%;
border: 1px solid blue;
}
.grid.inline-block {
font-size: 0;
}
.grid.inline-block .element {
display: inline-block;
vertical-align: top;
font-size: 1rem;
width: 32%;
border: 1px solid blue;
}
.clear {
clear: both;
}<h1>Floated grid</h1>
<div class="grid floated">
<div class="element">Element</div>
<div class="element">Element</div>
<div class="element">Element</div>
<div class="element">Element</div>
<div class="element">Element with different height and content</div>
<div class="element">Element</div>
<div class="element">Element</div>
</div>
<div class="clear"></div>
<h1>Inline block grid</h1>
<div class="grid inline-block">
<div class="element">Element</div>
<div class="element">Element</div>
<div class="element">Element</div>
<div class="element">Element</div>
<div class="element">Element with different height and content</div>
<div class="element">Element</div>
<div class="element">Element</div>
</div>什么鬼？如您所见， float 网格有一个问题，当其中一个元素的高度高于其他元素时，元素的堆栈。这会导致很多问题。另一件事是我们需要在结束后立即清除 float 。
您可以看到行内 block 网格。不存在 float 网格问题。你有正确的行高，元素在文档的正常流动中，堆栈遵循正确的顺序，你不需要清除任何东西。
另一个常见的 float 问题
如果您开始使用 float 布局，则需要 float 所有后续元素，至少在您不每次都清除所有内容的情况下。 float 元素转换为 block 元素。你可以得到一个 <span>标记(内联元素)，如果你 float 它，你将在层堆栈中获得一个 block 元素(作为 <div> )(层堆栈由 float 、绝对定位、不透明度等组成)。如果您不能很好地理解 float 的工作原理，这会导致很多问题。
结论和建议
结论是， float 是制作 float 元素的好工具(比如左边的图像，右边的文本跟随流)，当 Internet Explorer 不接受内联 block 或flexbox 或其他现代布局技术，但在 2016 年没有理由使用 float 进行布局。我的建议是使用其他技术(位置、显示、 flexbox 、内联 block 元素等)，并且 float 仅用于 float 普通元素。
祝你好运!
关于html - 为什么文本 id=box-2 不在 box-2 中？css 中 float 的重叠规则，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35476616/