-1

我知道在每次浮动后添加清除 div 会使代码变脏。

这是代码

<div id="container">
        <div id="header">
            <div class="left-block">
                <a href="#" class="logo"></a>
            </div>
            <div class="right-block">
                <a href="#" class="login"></a>
                <a href="#" class="register"></a>
                <div class="technique"></div>
            </div>
        </div>
        <div id="content">
             <div class="content-title"><h1>Умная Помощница</h1></div>
        </div>
    </div>

CSS

.left-block {float:left;}
.right-block{float:right;}

左右块有浮动(左右对齐)。我需要清除它们之后的浮动效果,以便正确显示#content。我怎么能不使用清除 div 做到这一点?

谢谢

4

3 回答 3

4

你所追求的是一个clearfix ( 2 )

例如,。

.clearfix:after {
   content: " ";
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}
于 2013-11-14T15:20:02.723 回答
1

您可以给现有<div id="content">的清除 css 属性:

#content{
  clear:both;
}
于 2013-11-14T15:21:55.953 回答
0

有大量的 clearfix hacks 和技术。最简单的方法之一就是添加overflow: hidden到容器#headerdiv 中。

我首选的方法是Nicholas Gallagher 的“Micro Clearfix”

.cf:before,
.cf:after {
    content: " ";
    display: table;
}

.cf:after {
    clear: both;
}

.cf {
    *zoom: 1; /* IE6/7 only */
}

cf类添加到您的#header元素中,一切就绪!

您还可以使用该clear: left|right|both属性清除浮动,这意味着该元素将在该侧(或两侧)的任何浮动元素之后包裹 - 在您的情况下添加clear: bothto#content也可以,但更可取的是 clearfix 解决方案,因为只需添加即可clear: both解决您的浮动定位发出#content但不会强制#header在其中包含两个浮动元素。

于 2013-11-14T15:20:02.243 回答