overflow的多个作用

1.overflow溢出隐藏

<p class="box">栏目概述:①平面设计是什么?平面设计需要学什么?平面设计软件有哪些?ps,AI,cdr为设计师常用做图软件,栏目分享设计师构图经验与素材网站网址.②web前端如何学?前端开发语言有哪些?前端需要学什么?栏目分享html,css,js,h5/css3,jQ和响应式网站设计及前端项目框架开发工具.③cms程序网站是什么?cms程序如何建站?怎样建设cms程序网站?栏目分享织梦dedecms仿站和wordpress博客搭建及帝国cms网站.④seo怎么做优化?什么是seo优化?如何学好seo优化?栏目分享怎么分析自己和竞争对手网站与seoer工作网站数据分析布局及SEO赚钱.</p>

*{
margin: 0;
padding: 0;
}
.box{
width: 600px;
height: 100px;
border: 1px solid red;
overflow: hidden;
}

2.overflow清浮动

<div class="wrap">
<div class="col01"></div>
<div class="col02"></div>
</div>

.box{
width: 600px;
height: 100px;
border: 1px solid red;
overflow: hidden;
}
.wrap{
border: 10px solid #000;
}
.col01,.col02{
float: left;
width: 200px;
height: 200px;
}
.col01{
background-color: #FF0000;
}
.col02{
background-color: darkcyan;
}

3.overflow解决margin-top的传递问题

<div class="bigBox">
<div class="smallBox"></div>

.bigBox{
width: 400px;
height: 400px;
background-color: sienna;
}
.smallBox{
width: 100px;
height: 100px;
background-color: forestgreen;
margin-top: 50px;
}