HTML 布局的高度问题

Question

为什么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>
明明设置了清除浮动？
为什么这样？

Answer 1

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

Answer 2

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