49-清除浮动1：给父盒子设置高度
给父盒子设置高度，这种方式不灵活，公司的产品修改的时候，要求父盒子高度变大，
不可能去手动修改
尽量不要给父元素去修改高度，不建议这样的方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>清除浮动1：设置盒子高度</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
width: 400px;
}
ul{
list-style-type: none;
}
div ul li{
float: left;
width: 100px;
height: 40px;
}
.box{
width: 200px;
height: 100px;
}
</style>
</head>
<body>
<div>
<ul>
<li>
Python
</li>
<li>
web
</li>
<li>
linux
</li>
</ul>
</div>
<div class="box">
</div>
</body>
</html>
50-清除浮动2-clear：both
给浮动元素最后面加一个空的div，并且该元素不浮动，这样的方式称为内墙法，然后设置clear:both->清除所有的浮动影响，这样的方式无缘无故加了div标签，结构冗余，不推荐使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>清除浮动2：clear</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
width: 400px;
}
ul{
list-style-type: none;
}
div ul li{
float: left;
width: 100px;
height: 40px;
}
.box{
width: 200px;
height: 100px;
}
.clear{
clear: both;
}
</style>
</head>
<body>
<div>
<ul>
<li>
Python
</li>
<li>
web
</li>
<li>
linux
</li>
<div class="clear"></div>
</ul>
</div>
<div class="box">
</div>
</body>
</html>
51-清除浮动3-伪元素清除法(常用)
.clearfix:after{
content: '';
clear: both;
display: block;
}
52-清除浮动4-overflow：hidden(常用)
overflow: hidden;是在内容超出部分就隐藏
overflow: scorll:不论是否需要，用户代理都会提供一种滚动机制，而且是有可能(不是一定)会出现滚动条，这样会导致在写代码的时候导致前端的页面不可控
53-margin垂直方向塌陷问题
当给两个兄弟盒子设置垂直方向上的margin，那么排列的时候会以较大的为准，我们称为这种现象为塌陷
如果是浮动的盒子，垂直的方向上不塌陷
.box1{
width: 300px;
height: 200px;
margin-bottom: 20px ;
}
.box2{
width: 400px;
height: 300px;
margin-top: 50px;
}
54-margin：0 auto水平居中盒子
1.水平居中的盒子一定要有宽度，要有明确的width，否则就会继承父标签的宽度，浮动的时候是不能用的，
2.只有标准流下的盒子才能使用margin，当一个盒子浮动了，固定定位、绝对定位了，margin 0 auto就不能使用
3.居中盒子，而不是居中文本，文字水平居中使用text-align:center
55-善于使用父亲的padding,而不是margin
56-文本属性和字体属性
div{
width: 300px;
height: 100px;
border: 1px solid red;
/*设置字体的大小,px是像素的意思*/
/*字体的单位还有rem em %*/
/*em主要是用于移动端的字体样式大小的调节*/
/*rem也是移动端的布局使用*/
font-size: 20px;
}