HTML 布局的高度问题

85V)G}CHB]ZU23JDXSY@]%V.png

为什么h2的高度是0?
h2 .box1 {

        float:left;
        font-weight:bold;
        border-bottom:5px solid red;
        width:100px;
    }
    h2 .box2{
        float:right;
        display:block;
        height:100%;
        width:100px;
    }
    .box2::after {
        content:"";
        display:block;
        clear:both;
        height:0px;
    }
    h2 {
        border-bottom:5px solid black;
        margin-bottom:30px;
    }
    
<h2>
    <span class="box1">公益行动</span>
    <a class="box2" href="###">more</a>
</h2>
明明设置了清除浮动?
为什么这样?
阅读 400
评论
    2 个回答
    • 2.4k

    伪元素clear:both清除浮动不是在box2里,你要放h2,h2::after。

      • 1.3k
      h2::after {
         content:"";
         display:block;
         clear:both;
      }
          
      或
      <span class="box1">公益行动</span>
      <a class="box2" href="###">more</a>
      <table style="clear: both"/>
              
        撰写回答

        登录后参与交流、获取后续更新提醒