在用HTML+css写页面中遇到的问题

标签：box   效果图   size   str   oat   属性   高度   image   常用   

一、清除浮动。

（1）verflow:hidden;这个CSS样式是大家常用到的CSS样式，但是大多数人对这个样式的理解仅仅局限于隐藏溢出，而对于清除浮动这个含义不是很 了解。一提到清除浮动，我们就会想到另外一个CSS样式：clear:both，我相信对于这个属性的理解大家都不成问题的。

    verflow:hidden清除浮动，例如如下：（样式box div是样式content div的父元素）

           .box{ 
          background:#000; 
          width:300px;
          overflow:hidden;
         } 
        .content {         
          float:left; 
          width:200px; 
          height:200px; 
          background:red;
         }

（效果图） box设置overflow:hidden，清除content的浮动，所以box的高度随content的高度变化而变化。如果box没有设置overflow:hidden，那么content的高将影响不了box的高。

（2）clear:both;该属性的值指出了不允许有浮动对象的边。这个属性是用来控制float属性在文档流的物理位置的。

当属性设置float（浮动）时，其所在的物理位置已经脱离文档流了，但是大多时候我们希望文档流能识别float（浮动），或者是希望float（浮动）后面的元素不被float（浮动）所影响，这个时候我们就需要用clear:both;来清除。

样式　     <style>

.p1{
float:left;
width:200px;
background: darkgoldenrod;
}
.p2{
float:left;
width:400px;
background: darkmagenta;
}
.p3{
clear: both;
}

</style>

HTML中的代码

<p class="p1">这个是第1列，</p>
<p class="p2">这个是第2列，</p>
<p class="p3">这个是第3列。</p>

如果不给第三列clear:both，那么第三列就会在第二列的后面，加了之后，在第二列的下面。

在用HTML+css写页面中遇到的问题

标签：box   效果图   size   str   oat   属性   高度   image   常用   

原文地址：http://www.cnblogs.com/wgl0126/p/7468329.html