oveflow属性

oveflow属性

1.

值	描述
visible	默认值。内容不会被修剪，呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

2.使用最多的情况

overflow：hidden； 常用来清除浮动

3. 例

<div class="content">
	<div class="text fl">
    	<h2>HTML5：过去、现在、未来</h2>
    	<p>展示了HTML5的发展路程，从1991年HTML的出现，经过多年演变和进化，2009年HTML5问世了。它超越了以往的功能，增加了web网页的表现力，同时也增加了表单、本地数据等全新功能，对于网站的建设是一个全新的体验，HTML5带给Web无穷无尽的可塑性。</p>
     </div>
     <div class="rightBox fr">
         <div class="reference">
               <h5>参考资料</h5>
               <ul>
                   <li></li>
              </ul>
         </div>
   </div>
</div>

.fl{
    float: left;
}
.fr{
    float: right;
}
.content{
    overflow: hidden;/* 清除浮动 */
    border: 1px solid black;
}
.content .text{
    width: 680px;
    border-right: 1px dotted #ccc;
    padding: 50px 20px;
}
.content .rightBox{
    padding-top: 100px;
}