首页手记总结去除浮动的最佳方法

总结去除浮动的最佳方法

标签：

Html/CSS

1、普通清除浮动及不足之处

一般我们在清除浮动的时候，会预先定义通用样式 .clear

<style>
    .clear{
        clear: both;
        line-height: 0;
        height: 0;
        font-size: 0;
        visibility: hidden;
    }
</style>

然后在需要清除浮动的地方使用如下代码：

<div>
    <div style="float:left;display:block;width:100px;"></div>
    <div style="float:left;display:block;width:100px;"></div>
    <div class="clear"></div>
</div>

这样不仅增加了页面的结构，而且造成代码的拥肿。

2、一种更好更高效的清除浮动的方式

预先定义如下通用样式:

<style>
    .clearfix:before,
    .clearfix:after {
        content: " ";
        display: block;
          line-height: 0;
        height: 0;
        font-size: 0;
        visibility: hidden;
    }
    .clearfix:after {
        clear: both;
    }
    .clearfix {
        *zoom: 1;
    }
</style>

然后对父元素添加样式，

<div class="clearfix">
    <div style="float:left;display:block;width:100px;"></div>
    <div style="float:left;display:block;width:100px;"></div>
</div>

点击查看更多内容