浮动是使脱离标准文档流的一种方法，适当的浮动可以较好的排版，但是因为浮动的元素脱标了，会影响后面的布局
<div class="father"> <div class="son"></div> </div> <p>这是一块天蓝色的区域</p>
盒子的样式
.father{border: 1px solid #000;} .son{width: 500px; height: 200px; background: #00b3ee; float: left;}当想在浮动的区域下方添加一行文字的时候就会出现问题
1.文字没有如期望那样显示在区域下方
2.父盒子没有被撑开
那要清除这种影响就要清除浮动
现学的方法有三
①给父盒子设置高度（）
加上高度
.father{border: 1px solid #000;height:100px;}现在就正常了，但在实际开发中，网页的各个模块大小并不都是固定的，这种方法对后续的维护和拓展人员不友好
②给父盒子一个浮动
看，又加了一个浮动，可能能解决当前问题，但是无形中自己本身又是一个问题了，所以最好别用
另外貌似也解决不了前面的问题
③给父盒子一个overflow:hidden
.father{border: 1px solid #000;overflow:hidden;}效果和方法1一样
本意是元素溢出部分，隐藏起来，而在这里起清除浮动的作用，能够撑起盒子，盒子高度由内容决定（前提盒子高度为0），可拓展性及友好性大大
增强。
暂时先写这么多，后续更新
【在学习css和html的路上，文章可能很多错误，欢迎给出建议】
