清除css浮动问题

标签：width   top   清除   css   一个   overflow   float   flow   设置   

一个元素的css设置了浮动（float），会影响到他下面的元素，使html页面显示达不到预期的效果，下面介绍几种值得推荐的有效清除浮动的方法。

方法一：在设置浮动元素的后面新增一个div,将其设置成clear:both

例：

<div class="div">
    <div class="head"></div>
    <div class="content">
        <div class="top_content">
            <div class="top1"></div>
            <div class="top2"></div>
            <div class="top3"></div>
        </div>
        <div class="clearfloat"></div>
        <div class="next_content"></div>
    </div>
    <div class="foot"></div>

.clearfloat{
    clear: both;
}


方法二：在设置浮动元素的后面新增一个br,将其设置成clear:both

例：

<div class="div">
    <div class="head"></div>
    <div class="content">
        <div class="top_content">
            <div class="top1"></div>
            <div class="top2"></div>
            <div class="top3"></div>
        </div>
        <br class="clearfloat"/>
        <div class="next_content"></div>
    </div>
    <div class="foot"></div>

.clearfloat{
    clear: both;
}
方法三：将父元素的overflow设为隐藏
例：

例：

<div class="div">
    <div class="head"></div>
    <div class="content">
        <div class="top_content">
            <div class="top1"></div>
            <div class="top2"></div>
            <div class="top3"></div>
        </div>
        <div class="next_content"></div>
    </div>
    <div class="foot"></div>

.top_content{margin:0 auto;width:1000px;overflow: hidden}

清除css浮动问题

标签：width   top   清除   css   一个   overflow   float   flow   设置   

原文地址：http://www.cnblogs.com/Dingzy/p/7677646.html