子元素越界问题与子元素全浮动后父元素高度为0问题

1、CSS中盒子模型的计算方式
.box{
box-sizing: content-box/border-box;
}
content-box:一个盒子的总宽=margin+border+padding+width
即width只是指盒子中内容的宽度
border-box:一个盒子的总宽=margin+width
即width中包含内容、padding、border的宽度之和

示例：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         *{
 8             /*box-sizing: content-box;*/
 9             box-sizing: border-box;
10         }
11         .parent{
12             width: 600px;
13             height: 400px;
14             background-color: #bff;
15         }
16         .child1{
17             float: left;
18             width: 300px;
19             height: 100px;
20             background-color: #fbf;
21             border: 5px solid #333;
22             /*margin-left: 1px;*/
23             padding: 5px;
24         }
25         .child2{
26             float: left;
27             width: 300px;
28             height: 100px;
29             background-color: #ffb;
30         }
31     </style>
32 </head>
33 <body>
34     <div class="parent">
35         <div class="child1">MMMM</div>
36         <div class="child2"></div>
37     </div>
38 </body>
39 </html>

2、子元素的margin-top/margin-bottom的越界问题

解决方案：
a、给父元素加边框 -- 有副作用
b、给父元素加 margin-top:0; -- 无效
c、给父元素加 padding-top:1px; -- 有副作用
d、给父元素加 overflow:hidden -- 有副作用
e、给父元素添加内容生成：
.parent:before{
content: ' ';
display: table;
}
注：显示模式display取值，可以为table
显示模式为table时，若table中没有元素，则不占一行，但不允许其兄弟元素与其处于同一行

示例：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         *{
 8             box-sizing: border-box;
 9         }
10         .parent1,.parent2{
11             width: 600px;
12             height: 200px;
13         }
14         .parent1{
15             background-color: #aaf;
16         }
17         .parent2{
18             background-color: #afa;
19             /*border: 1px solid transparent;*/
20             /*margin-top: 0;*/        /*无效*/
21             /*padding-top: 1px;*/
22             /*overflow: hidden;*/
23         }
24         .parent2:before{
25             content: ' ';
26             display: table;
27         }
28         .child{
29             width: 100px;
30             height: 50px;
31             background-color: #faf;
32             margin-top: 10px;
33         }
34     </style>
35 </head>
36 <body>
37     <div class="parent1"></div>
38     <div class="parent2">
39         <div class="child">I am a child</div>
40     </div>
41 </body>
42 </html>

3、子元素全部浮动后父元素高度为0

解决方法：
a、给父元素加 overflow:hidden; -- 有副作用
b、在父元素的最后添加内容生成：
.parent:after{
content: ' ';
display: table;
clear:both;
}

示例：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         *{
 8             box-sizing: border-box;
 9         }
10         .parent1{
11             width: 600px;
12             /*height: 200px;*/
13             background-color: #aaf;
14             /*overflow: hidden;*/
15         }
16         .parent1:after{
17             content: ' ';
18             display: table;
19             clear:both;
20         }
21         .child1, .child2, .child3{
22             float: left;
23             width: 150px;
24             border: 1px solid #000;
25         }
26     </style>
27 </head>
28 <body>
29     <div class="parent1">
30         <div class="child1">111</div>
31         <div class="child2">222</div>
32         <div class="child3">333</div>
33     </div>
34     <hr>
35 </body>
36 </html>