Html 为什么两个块需要向左浮动才能对齐？

假设我有这个HTML：

​<div class = "block1">hi</div>
<div class = "block2">hi</div>

为什么block2需要有

float:left以便位于block1的右侧？block1（float:left）的属性还不够吗

block2
默认显示为块级元素，这意味着它占用整行

它不一定要有
浮动：left
才能显示在
块1的右侧；如果它通过
display:inline
或
display:inline block
显示为内联级元素，它将显示在其同级元素旁边


为了更详细地解释它，让我们假设您将
float:left
设置在
block2
上：

.block1 {
    width:100px;
    border:1px solid;
}

​.block2 {
    width:100px;
    border:1px solid;
    float: left;
}

首先会发生的事情是block2将被放置在它通常放置的位置。让我们看看在哪里


块1显示为块级元素
块级元素的渲染就像它们在元素前后都有换行符一样
因此，默认情况下，block2将显示在第二行

现在block2脱离了正常流程，并尽可能向左移动。。。但它已经在左边缘了！这导致block2显示在block1下面

在这里可以很好地解释内联元素和块级元素之间的区别：
block2
默认显示为块级元素，这意味着它占用整行

它不一定要有
浮动：left
才能显示在
块1的右侧；如果它通过
display:inline
或
display:inline block
显示为内联级元素，它将显示在其同级元素旁边


为了更详细地解释它，让我们假设您将
float:left
设置在
block2
上：

.block1 {
    width:100px;
    border:1px solid;
}

​.block2 {
    width:100px;
    border:1px solid;
    float: left;
}

首先会发生的事情是block2将被放置在它通常放置的位置。让我们看看在哪里


块1显示为块级元素
块级元素的渲染就像它们在元素前后都有换行符一样
因此，默认情况下，block2将显示在第二行

现在block2脱离了正常流程，并尽可能向左移动。。。但它已经在左边缘了！这导致block2显示在block1下面

在这里可以很好地解释内联元素和块级元素之间的区别：
元素是块级元素，意味着它将位于其单独的行上，因此您需要在
块2
中使用
float
，因为它是
div
元素。
元素是块级元素元素意味着它将在其单独的行上，因此您需要在
块2
中使用
float
，因为它是
div
元素。
您必须在float之后清除。froznekoi，现在是了。对不起，小提琴在哪里…没有链接…你必须在浮动后清除。froznekoi，现在有了。Sorrywhere是Fiddle…没有链接…正确，但这种“横向堆叠”行为只适用于内联元素或浮动元素。好的，但当它是display:block时，为什么我需要设置float:left，以便元素位于第一个块的右侧？该属性并不意味着“向右”，是吗？@HommerSmith在第一个div上设置float不会直接影响第二个div的布局。当您指定
float:left
时，它表示此元素将定位在页面的正常流程中，然后从中取出并尽可能向左移动（无重叠）。正确，但这种“横向堆叠”行为仅适用于内联元素或浮动元素。好的，但当它是显示：块时，为什么我需要设置float:left，以便元素位于第一个块的右侧？该属性并不意味着“向右”，是吗？@HommerSmith在第一个div上设置float不会直接影响第二个div的布局。指定
float:left
时，表示此元素将定位在页面的正常流程中，然后从中取出并尽可能向左移动（无重叠）。