Html 浮动元素的对齐不一致 总结
浮动元素与相邻非浮动元素的垂直对齐不一致，这种变化受容器或父元素的Html 浮动元素的对齐不一致 总结,html,css,alignment,css-float,Html,Css,Alignment,Css Float,浮动元素与相邻非浮动元素的垂直对齐不一致，这种变化受容器或父元素的边框顶部宽度值和溢出值的影响。有什么好处？ 背景 我在练习涉及元素的布局时遇到了这种情况。我上个月刚开始自学HTML/CSS，所以如果这是因为我忽略了一些基本的东西，请给我上一课。 细节 容器中有一个浮动元素和一个非浮动块元素 浮动元素（p1）具有固定宽度和0边距。它在左/右方向浮动。它是起始浮动元件（即，浮动到容纳盒侧面的第一列） 相邻元件（p2）是环绕p1的非浮动块。请注意，此处特意为p2指定非零裕度值，以表明p1和p2在
边框顶部宽度溢出背景 我在练习涉及
细节
边框顶部宽度和溢出来定位自身：
浮动元素（p1）与相邻的非浮动元素（p2）对齐（即p1框的上边框与p2框的上边框对齐）。
CSS规则：
div{边框顶部宽度：0px；}
和
div{溢出：可见；}
浮动元素（p1）将与
包含框或父元素。
CSS规则：
div{边框顶部宽度：非0px；}
或
div{overflow:auto/hidden/scroll/}
请注意，在情况2中，任何一条规则本身都足以启用对齐。
代码
过于简化的代码看起来是这样的：
HTML
或
我在JSFIDLE上给出了一个示例：
或者您也可以使用下面的代码片段进行检查：
/*，边距设置为0以避免干扰*/
身体{
边际：0px；
}
div{
边际：0px；
}
/*在段落上方绘制的边框表示第二段的顶部边框*/
.1分部{
边框底部：1px实心；
}
p{
边框：1px实心；
}
/*浮动段落：边距设置为0以突出显示异常对齐*/
.p1{
浮动：左；
边际：0px；
宽度：400px；
}
/*请注意，元素的默认边距为1em，因此此声明仅用于演示*/
.p2{
利润率：16px；
}
输入#边框：选中~div.div2{
边框顶部：0.02px实心透明；
}
输入#溢出：选中~div.div2{
溢出：自动；
}
容器边框顶部宽度：非0
容器溢出：自动/隐藏/滚动
Lorem ipsum door sit amet，一位杰出的领导者，在劳动和就业方面都有临时的贡献。但是，在最低限度上，我们需要一个实验室来进行日常工作。
Lorem ipsum door sit amet，一位杰出的职业经理人，在劳动和就业方面都是临时雇员。但是，在最低限度上，我们需要一个实验室来进行日常工作。酒后驾车
这是一种不受欢迎的行为，它是一种不受欢迎的行为。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡。
浮动框将与未浮动的框垂直放置。在本例中，如果它是其容器中的第一个元素，则其上边缘与其容器的内容框顶部重合。（您看到的效果差异是div容器的内容框上下移动。）
在最初的情况下，p1是浮动的，因此无法流动，因此无法阻止p2的垂直边缘与其祖先一起塌陷。非0宽度边框顶部的存在意味着p2的顶部边距不再与div元素的顶部边距相邻（即，它们被边框分隔），因此边距不能一起折叠
溢出：auto
的一个副作用是，它会导致div建立块格式上下文。块格式上下文后代的边距不会与建立块格式上下文的元素的边距一起折叠。使div建立块格式上下文的更直接但更新的方法是将其设置为display:flow root
默认情况下，流内块框的相邻垂直边距将塌陷。因此，p元素（p2）的默认上边距将与div和body元素的上边距一起折叠，从而增加div元素内容框顶部上方的边距，从而降低浮动元素
影响垂直边距。对于水平边距，您看到的不是边距塌陷，而是不同的效果。p1和p2彼此重叠。p2并不完全围绕p1，它的内容围绕p1。发生的情况是p2由一堆线框组成。p1旁边的每个线框的左边缘与p1的右边缘重合。p2的左边距仍然接触到包含div的内容框的左边缘，这与p1根本不存在完全相同，因此它不会影响这些行框的左边缘的位置，除非p2的左边距、边框和填充大于p1的边距框的宽度
试着回答我自己的问题
<div>
<img src="example.jpg">
<p>Random text</p>
</div>
img {
float: left;
}
/* floating element aligns with adjacent element */
div {
border: none;
overflow: visible;
}
/* floating element aligns with top border of container */
div {
border-top-width: 1px;
overflow: auto;
}