CSS之清除浮动

浮动属性之清除浮动

浮动属性固然好用,但是清除浮动也是一件很头痛的事情，清除浮动的方法有很多，同时缺点也是存在的，下面来简单介绍几种清除浮动的方式

方法	缺点
给父元素设置高度	高度无法自适应
父元素加overflow：hidden	超出部分会隐藏
在所有浮动元素后加空的div，写上clear:both	代码冗余
浮动可以清楚浮动，给父元素加float	带来新的浮动问题
父元素使用fixed或者absolute定位	整个元素都脱离文档流

在所有浮动元素后加空的div，写上clear:both
  clear 属性规定元素的哪一侧不允许其他浮动元素。
  clear: left  / right  /  both
  清除  左浮动   右浮动  两者都清除

浮动清楚浮动,给父元素加float：
  在导航栏中，当ul不浮动，li浮动横向排列时，ul是没有高度的；而当ul浮动，li也浮动的时候，ul就会有高度。但这只是解决了里浮动带来的问题，同时出现了ul浮动问题。

父元素使用fixed或者absolute定位：
  fixed或者absolute定位是完全脱离文档流的，这样虽然可以解决子元素的浮动，但是同时将整个父元素置于文档流外，不占位置，与用浮动清楚浮动有类似的隐患。

以上的清楚浮动方式都存在或多或少的缺点，所以就有了整理的“万能清除法”

.cl:after{
    content:"";
    display:block;
    clear:both;
    /* 兼容问题 */
    height:0;
    visibility:hidden;
    overflow:hidden;
}
.cl{
    *zoom:1;   /* IE7专属 清除浮动 */
}

使用方式也十分简单，只需要在需要清除浮动的父元素的class里面加上cl就可以了,eg：

<!-- 导航栏 -->
    <div class="navigation">
        <div class="w cl">
            <h1>
                <img src="../images/1_03.jpg" alt="">
            </h1>
            
            <ul class="nav">
                <li>
                    <a href="">首页</a>
                </li>
                <li>
                    <a href="">求职</a>
                </li>
                <li>
                    <a href="">扫码登录</a>
                </li>
                <li>
                    <a href="">道具兑换</a>
                </li>
            </ul>

            <ul class="system">
                <li class="sys_iphone">
                    <a href="">iPhone</a>
                </li>
                <li class="sys_android">
                    <a href="">Android</a>
                </li>
            </ul>
        </div>
    </div>

.w{
    width: 1171px;
    margin: auto;
    font-size: 12px;
}
body{
    background-color: #f3f3f3;
}
textarea{
    /* 不允许拉伸 */
    resize: none;
}
.cl:after{
    content:"";
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
    overflow: hidden;
}
.cl{
    /* IE7 清除浮动 */
    *zoom: 1;
}
/* 导航栏 */
.navigation{
    background: #fff;
}
.navigation h1{
    margin: 23px 0px;
    float: left;
}
.nav li{
    float: left;
    font-size: 16px;
    line-height: 100px;
    padding-left: 40px;
}
.nav a{
    color: #333;
}
.nav a:hover{
    color: #53cac3;
}
.system li{
    float: right;
    padding-right: 22px;
    padding-left: 30px;
    border-right: 1px solid #e5e5e5;
    margin: 42px 19px 40px 0px;
    line-height: 18px;
    font-size: 18px;
}
.system li:first-child{
    border-right: none;
}
.system a{
    color: #333;
}
.sys_iphone{
    background: url(../images/1_08.jpg) no-repeat 0 center;
}
.sys_android{
    background: url(../images/1_06.jpg) no-repeat 0 center;
}

效果图：