css 子元素撑开父元素 清除浮动

1、首先  .right 与 .left 为 .box 的子元素，且浮动。

.box{   // 父元素切记height: auto;

   height: auto;

   border-bottom:20px solid grey;

}

.left{

    height: 9rem;

    width: 9rem;

    top: 2.5rem;

    left: 2.5rem;

    float: left;

    margin: 2.5rem 1.25rem 1.25rem 2.5rem;

}

.right{

    float: left;

    top:2.5rem;

    left: 12.75rem; 

    width: 46rem;

    margin: 2.5rem 1.25rem 0rem 0rem;

}

2、用 ：after清除浮动

只需在 父元素 .box，清除浮动就可以。

若  .right 与 .left 的子元素有浮动。仍旧给其添加以下css属性。

.box:after{

    display:block;

    content: '';

    clear:both;

    height: 0px;

}