为什么文本id=方框2超出了方框2? css中浮动的重叠规则
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>
很明显，方框2与方框1重叠。
问题使我困惑：
1.方框-1被放在框-2之前，为什么结果不是框-2重叠框-1？
2.为什么文本id=box-2不在方框2中？
如果方框2与方框1重叠，并且文本id=box-2位于方框2中，则结果应该是
请告诉我css浮动规则的原理。
回答 1
Stack Overflow用户
发布于 2016-02-18 09:20:01
浮点数不是用于布局，而是用于浮动元素。这是因为你面临的问题和大多数用户不理解。
CSS浮动的基本原理是属性从浮动元素的正常流中提取出来。此时，当您浮动一个元素时，它所在的直线高度将为零。我用一个例子来解释你：
.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>
正如您在示例中所看到的，红色边框模拟线的高度。现在您可以看到content .floated正在走出容器.box，由于这个原因，这个框看起来没有高度，似乎没有任何内容。您还可以看到，为了避免所面临的冲突，.box已被清除。
让我们看看另一个例子。浮标的一个常见用途是网格。我不同意这种方法，但是找到这样的程序是很常见的：
.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>
搞什么鬼?正如您所看到的，浮动网格有一个问题，当其中一个元素比其他元素的高度更高时，元素的堆栈就会出现问题。这就引起了很多问题。另一件事是，我们需要在它结束后清除浮标。
你可以看到内联块网格。浮动网格问题都不存在。您有正确的行高，元素处于文档的正常流中，堆栈遵循正确的顺序，不需要清除任何东西。
另一个常见的浮点问题
如果使用floats启动布局，则需要浮动以下所有元素，至少如果不每次清除所有元素。浮动元素转换为块元素。您可以得到一个<span>标记(内联元素)，如果浮动它，您将在层堆栈中获得一个块元素(作为<div>) (层堆栈由浮点数、绝对定位、透明度等组成)。如果你不清楚浮标是如何工作的，这会引起很多问题。
结论和建议
得出的结论是，浮动是一个很好的工具，可以制作浮点元素(比如左边的图片和右边的文本)，而当互联网浏览器不接受内联块、柔性盒或其他现代技术来布局时，浮点数是很好的，但是在2016年，没有理由用浮标来布局。我的建议是使用另一种技术(位置、显示、柔性盒、内联块元素等)，而浮动只用于浮动普通元素。
祝好运!
https://stackoverflow.com/questions/35476616
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号