1、盒子模型

1.1、 box-sizing: border-box;

 div{
        width: 200px;
        height: 200px;
        background: red; 
         box-sizing: border-box;       
        border: 15px solid black;
        padding: 20px;
    }

box-sizing:border-box , 给元素border；padding不会改变它的width，height

2、float

2.1、float的原理：相对于整个页面漂浮起来

.one{
        width: 100px;
        height: 100px;
        background: red;
        float: right;
    }

2.2、清除float clear: both;清除float 使不受float的影响

.two{
        clear: both;/*清除float 使不受float的影响*/
        width: 200px;
        height: 200px;
        background: blue;
    }

2.3、flaot和父元素 父元素不设置高度，子元素float，父元素的高度会坍塌

.parent{
        width: 400px;
         
        /* overflow: hidden;*/
        background: red;
    }
    .child{
        width:200px;
        height: 200px;
        background: green;
       float: left;
    }
   
  .row:after{
     content:"";
     display: table;
     clear: both;
   }

如何让父元素获取高度

1.overflow：hidden
2.在float后面加清除clean:both;
3.给父元素公共样式
.row:after{
    content:"";
    clear:both;
    display:table;
}