利用伪元素清除浮动：
你要解决浮动的为题必须在父级的逻辑的后面加上一个p元素来清除浮动吧，你加完p元素之后破坏结构了，不好，咱相加，又不能加，就用伪元素最合适了吧！
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.demo::after{
content: "";
clear: both;
}
.demo{
border: 1px solid black;
}
.demo1{
float: left;
width: 100px;
height: 100px;
background-color: black;
color: #fff;
}
</style>
<title></title>
</head>
<body>
<div class="demo">
<div class="demo1">1</div>
<div class="demo1">2</div>
<div class="demo1">3</div>
</div>
</body>
</html>
你看看好使吗？
不好使，这个clear元素有点特殊，你想让他生效的话，必须得是块级元素才行，所以我得把after改成块元素，display: block;
你就算有再多的子元素，父级元素也能包裹子元素。
除了清除浮动之外还有没有其他的方法解决？
为什么父级元素包不住他呢？
是因为浮动元素有浮动流，父级元素是块元素，块元素看不到他。那，能看到他的元素是不是有一大堆啊？
扫描二维码关注公众号，回复：
4127542 查看本文章
所以你给父级加上，display: inline-block;或float: left;
或position: absolute;都可以（有可能你看不出来，不妨把父级的border改成border: 3px solid red;试试）。
现在你看，虽然是父级元素包住子级元素了，但是他的父级没有原来那么宽了。
拓展：
凡是设置了float: left/right;或position: absolute;的，系统会自动从内部把元素给你转换成inline-bolck，你要是变成了行级块元素，宽高就是由内容决定！