有关浮动和常用清除方法总结

  一、最早浮动是应用于图像,使文本围绕图像周围,现在浮动经常被用到布局当中。因为浮动的对象脱离了文档流,它在文档中不占据空间,所以包含它的容器的高度不会随着它高度增加而增加,为了解决这个问题,需要清除浮动。

  html代码如下:


<head>
    
<title></title>
    
<style type="text/css">
        div
{border: solid 1px #ccc;}
        .layout
{width: 300px;}
        .left
{float: left;}
        .right 
{float: right;}       
        .left,.right
{width:100px;height:100px;}
    
</style>
</head>
<body>
    
<div class="layout">
        layout
        
<div class="left">
        float left
        
</div>
        
<div class="right">
        float right
        
</div>
    
</div>
</body>

  预期效果如下:

  

  实际效果如下:

   

   二、清除方法总结

   1、添加空元素

   在代码中添加空元素,并利用clear属性。修改代码如下:


<head>
    
<title></title>
    
<style type="text/css">
        div
{border: solid 1px #ccc;}
        .layout
{width: 300px;}
        .left
{float: left;}
        .right 
{float: right;}       
        .left,.right
{width:100px;height:100px;}
       
 .clear{clear:both;}
    
</style>
</head>
<body>
    
<div class="layout">
        layout
        
<div class="left">
        float left
        
</div>
        
<div class="right">
        float right
        
</div>
     
   <div class="clear"></div>
    
</div>
</body>

   2、使用伪类after

   修改代码如下:

<head>
    
<title></title>
    
<style type="text/css">
        div
{border: solid 1px #ccc;}
        .layout
{width: 300px;}
        .left
{float: left;}
        .right 
{float: right;}       
        .left,.right
{width:100px;height:100px;}
      
  .layout:after{display:block;content:".";clear:both;height:0px;visibility:hidden;}
    
</style>
</head>
<body>
    
<div class="layout">
        layout
        
<div class="left">
        float left
        
</div>
        
<div class="right">
        float right
        
</div>
    
</div>
</body>

 

   3、使用overflow属性

   修改代码如下:

<head>
    
<title></title>
    
<style type="text/css">
        
div{border: solid 1px #ccc;overflow:hidden;}
        .layout
{width: 300px;}
        .left
{float: left;}
        .right 
{float: right;}       
        .left,.right
{width:100px;height:100px;}

    
</style>
</head>
<body>
    
<div class="layout">
        layout
        
<div class="left">
        float left
        
</div>
        
<div class="right">
        float right
        
</div>
    
</div>
</body>

 

 

posted @ 2011-07-19 16:07  Bocher  阅读(293)  评论(5编辑  收藏  举报