码迷,mamicode.com
首页 > Web开发 > 详细

css技巧:清除浮动

时间:2015-07-15 14:52:49      阅读:162      评论:0      收藏:0      [点我收藏+]

标签:

1、常用方法——overflow

给浮动元素的容器添加overflow:hidden;或overflow:auto;可以清除浮动,另外在 IE6 中还需要触发 hasLayout ,例如为父元素设置容器宽高或设置 zoom:1。

不过不能和position配合使用,因为超出的尺寸的会被隐藏。 

overflow:auto会在内部宽度超过父元素时出现滚动条。

 

在添加overflow属性后,浮动元素又回到了容器层,把容器高度撑起,达到了清理浮动的效果。

2、终极方法——伪元素

如果遇到水平排列列表需要按情况显示二级子菜单的情况,使用overflow就会影响耳机子菜单了。

这时候就要在需要清除浮动的元素上设置伪元素:after,:before

<ul class="menu">
        <li><a href="#">首页</a></li>
        <li><a href="#">课程大厅</a>
            <ul>
                <li><a href="#">JavaScript</a></li>
                <li><a href="#">jQuery</a></li>
            </ul>
        </li>
        <li><a href="#">学习中心</a>
            <ul>
                <li><a href="#">视频学习</a></li>
                <li><a href="#">案例学习</a></li>
                <li><a href="#">交流平台</a></li>
            </ul>
        </li>
        <li><a href="#">经典案例</a></li>
        <li><a href="#">关于我们</a></li>
    </ul>

<style>
  .menu:before,.menu:after{/*清除浮动终极办法*/
content: ‘‘;
display: table;/*display的值也可以是block*/
}
.menu:after{
clear: both;
}
</style>

 3、可用但不推荐方法——浮动元素父容器也添加浮动属性

<ul class="menu">
        <li><a href="#">首页</a></li>
        <li><a href="#">课程大厅</a>
            <ul>
                <li><a href="#">JavaScript</a></li>
                <li><a href="#">jQuery</a></li>
            </ul>
        </li>
        <li><a href="#">学习中心</a>
            <ul>
                <li><a href="#">视频学习</a></li>
                <li><a href="#">案例学习</a></li>
                <li><a href="#">交流平台</a></li>
            </ul>
        </li>
        <li><a href="#">经典案例</a></li>
        <li><a href="#">关于我们</a></li>
    </ul>

<style>  

.menu{
width: 960px;margin: 60px auto;
border: 1px solid #222;
background-color: #111;
background-image: linear-gradient(#444,#111);
border-radius:6px ;
box-shadow: 0 1px 1px #777;
float:left;/*浮动元素的容器也添加浮动属性*/
}


}

</style>

3.1、可用但不推荐方法——固定父元素高度属性height

原理:父级div手动定义height,就解决了父级div无法自动获取到高度的问题。 

只适合高度固定的布局,要给出精确的高度,如果高度和父级div不一样时,会产生问题 。


3.2、可用但不推荐方法——结尾处加空div且设置clear:both

原理:添加一个空div,利用css提高的clear:both清除浮动,让父级div能自动获取到高度

不容易出现怪问题,但会出现很多空格,以前常用的解决方法。

<style type="text/css"> 
.div1{background:#000080;border:1px solid red} 
.left{float:left;width:20%;height:200px;background:#DDD} 
.right{float:right;width:30%;height:80px;background:#DDD} 

.clearfloat{clear:both} 
</style> 
 <div class="div1"> 
         <div class="left">Left</div> 
         <div class="right">Right</div> 
 <div class="clearfloat"></div> /*处理方法*/
</div> 

  3.3、可用但不推荐方法——结尾加<br/>

<style type="text/css"> 
.div1{background:#000080;border:1px solid red;margin-bottom:10px;zoom:1} 
.left{float:left;width:20%;height:200px;background:#DDD} 
.right{float:right;width:30%;height:80px;background:#DDD} 

.clearfloat{clear:both} 
</style> 
  <div class="div1"> 
          <div class="left">Left</div> 
          <div class="right">Right</div> 
           <br class="clearfloat" /> /*处理方法*/
</div> 

  

css技巧:清除浮动

标签:

原文地址:http://www.cnblogs.com/mmlvj/p/4648050.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!