设置元素浮动，出现高度塌陷导致鼠标无法点击

先贴代码片段：

<div style="width: 30%; float: left;"><nz-input-group nzSearch [nzAddOnAfter]=" suffixIconButton"><input type="text" nz-input placeholder="请输入实验名称" [(ngModel)]="q.name" name="name" id="name" /></nz-input-group><ng-template #suffixIconButton><button nz-button nzType="primary" nzSearch (click)="search()"><i nz-icon nzType="search"></i></button></ng-template>
</div>
<div class="floatR"><button nz-button type="submit" nzType="dashed" style="color: #c71d24; border-color: #c71d24;"(click)="add()">新建实验</button><button nz-button type="reset" (click)="reset()" class="mx-sm">草稿箱</button>
</div>

上面两个div元素，分别添加了左浮动和右浮动，添加float属性之后，这两个div元素出现了高度塌陷的问题。
在第一个div元素中，有一个输入控件input元素，在父元素高度塌陷的情况下，这个输入框是无法被鼠标选中的，这时候可以用下面几种发发解决：

• 为父元素设置高度

<div style="height: 20px;"><div style="width: 30%; float: left;"><nz-input-group nzSearch [nzAddOnAfter]=" suffixIconButton"><input type="text" nz-input placeholder="请输入实验名称" [(ngModel)]="q.name" name="name" id="name" /></nz-input-group><ng-template #suffixIconButton><button nz-button nzType="primary" nzSearch (click)="search()"><i nz-icon nzType="search"></i></button></ng-template></div><div class="floatR"><button nz-button type="submit" nzType="dashed" style="color: #c71d24; border-color: #c71d24;"(click)="add()">新建实验</button><button nz-button type="reset" (click)="reset()" class="mx-sm">草稿箱</button></div>
</div>

• 父元素设置overflow属性
  overflow属性有auto、hidden、scroll、visible等值，这里建议设置为auto或者hidden都可以。

<div style="overflow: auto;"><div style="width: 30%; float: left;"><nz-input-group nzSearch [nzAddOnAfter]=" suffixIconButton"><input type="text" nz-input placeholder="请输入实验名称" [(ngModel)]="q.name" name="name" id="name" /></nz-input-group><ng-template #suffixIconButton><button nz-button nzType="primary" nzSearch (click)="search()"><i nz-icon nzType="search"></i></button></ng-template></div><div class="floatR"><button nz-button type="submit" nzType="dashed" style="color: #c71d24; border-color: #c71d24;"(click)="add()">新建实验</button><button nz-button type="reset" (click)="reset()" class="mx-sm">草稿箱</button></div>
</div>

• 使用清除浮动
  清除浮动有两种方法，第一种：在浮动元素后面添加一个空div元素，并将起属性设置为clear:both;

<div style="width: 30%; float: left;"><nz-input-group nzSearch [nzAddOnAfter]=" suffixIconButton"><input type="text" nz-input placeholder="请输入实验名称" [(ngModel)]="q.name" name="name" id="name" /></nz-input-group><ng-template #suffixIconButton><button nz-button nzType="primary" nzSearch (click)="search()"><i nz-icon nzType="search"></i></button></ng-template>
</div>
<div class="floatR"><button nz-button type="submit" nzType="dashed" style="color: #c71d24; border-color: #c71d24;"(click)="add()">新建实验</button><button nz-button type="reset" (click)="reset()" class="mx-sm">草稿箱</button>
</div>
<div style="clear: both;"></div>

• 第二种方法清除浮动：在父元素上使用::after伪元素，并设置其content: “”; display: block; clear: both;属性

<div class="ddd"><div style="width: 30%; float: left;"><nz-input-group nzSearch [nzAddOnAfter]=" suffixIconButton"><input type="text" nz-input placeholder="请输入实验名称" [(ngModel)]="q.name" name="name" id="name" /></nz-input-group><ng-template #suffixIconButton><button nz-button nzType="primary" nzSearch (click)="search()"><i nz-icon nzType="search"></i></button></ng-template></div><div class="floatR"><button nz-button type="submit" nzType="dashed" style="color: #c71d24; border-color: #c71d24;"(click)="add()">新建实验</button><button nz-button type="reset" (click)="reset()" class="mx-sm">草稿箱</button></div>
</div>

.ddd::after{content: "";display: block;clear: both;
}