Html 块内的文本显示不正确

我有3个区块-区块1、区块2、区块3..区块1和区块2左浮动

块3内的文本需要显示在块内，但由于某些原因，它显示在块外

css

html

第一区
第2区
第3区

您需要清除块1和块2中的浮动。在block3中尝试以下操作：

#block3{
    height:90%;
    width:50%;
    background-color:yellow;
    clear:both;
}

---

你对浮动的使用是个问题。你看，区块2只是一个尝试和错误。它不会向左浮动。看看这个

希望这有帮助

使用这个css

      #block1 {
      height: 10%; 
      width: 50%;
      text-align: center;
      background-color: red;
      display: block;
      float: left;
     }

      #block2 {
      height: 90%; 
      width: 50%;
      text-align: center;
      background-color: green;
      display: block;
      float: left;
     }

      #block3 {
      height: 90%; 
      width: 50%;
      text-align: center;
      background-color: yellow;
      display: block;
      clear: both;
     }

---

我认为你需要重新思考HTML来实现这一点

也许更好的解决方案是将其分为两列，第一列是块1和块2，第二列是块3

HTML

<div id="col1">
  <div id="block1">
      Block 1
  </div>
  <div id="block2">
      Block 2
  </div>
</div>

<div id="col2">
  <div id="block3">
      Block 3
  </div>
</div>

试试这个CSS：

 html, body{
        height: 100%;
        width:100%;
    }
    #block1{
        height:10%;
        width:50%;
        text-align:center;
        float:left;
        background-color:red;

    }

    #block2{
        height:90%;
        width:50%;
        background-color:green;
        float:right;
    }

    #block3{
        height:90%;
        width:50%;
        background-color:yellow;
        float: left;

    }

    .clear {
        clear: both;
        content: ' ';
        *zoom: 1;
    }
    }

在HTML中：

<div id="block1">
    Block 1
</div>
<div id="block2">
    Block 2
</div>
<div id="block3">
    Block 3
</div>
<div class="clear"></div>

第一区
第2区
第3区

发生这种情况是因为“block3”在左侧调用其他框（包括box2[应该是float:right]）时四处浮动而不在某个位置。 我已经修复并添加了一个调试类（clear）

Jsfiddle：

---

希望有帮助

看起来我期待会发生什么。block3的内容不能显示在其所在位置的上方，除非您开始播放block的位置。另外，你把那个div的高度改为90%。将其保留为自动，您将看到它包含在背景中。此答案与sma在您之前七分钟发布的答案有何不同？我没有看到我在发布后看到的答案

<div id="col1">
  <div id="block1">
      Block 1
  </div>
  <div id="block2">
      Block 2
  </div>
</div>

<div id="col2">
  <div id="block3">
      Block 3
  </div>
</div>

html, body{
  height: 100%;
  width:100%;
}

body {
  margin: 0;
}

#col1, #col2 {
  float: left;
  width: 50%;
  height: 100%;
}

#block1{
  height:10%;
  text-align:center;
  background-color:red; 
}

#block2{
  height:90%;
  background-color:green;
}

#block3{
  height:100%;
  background-color:yellow;
}

 html, body{
        height: 100%;
        width:100%;
    }
    #block1{
        height:10%;
        width:50%;
        text-align:center;
        float:left;
        background-color:red;

    }

    #block2{
        height:90%;
        width:50%;
        background-color:green;
        float:right;
    }

    #block3{
        height:90%;
        width:50%;
        background-color:yellow;
        float: left;

    }

    .clear {
        clear: both;
        content: ' ';
        *zoom: 1;
    }
    }

<div id="block1">
    Block 1
</div>
<div id="block2">
    Block 2
</div>
<div id="block3">
    Block 3
</div>
<div class="clear"></div>