Question

我知道在每次浮动之后添加clear 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，我怎么能这样做？

由于

Answer 1

您所追求的是clearfix（2）

e.g。

.clearfix:after {
   content: " ";
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}

Answer 2

您可以为现有<div id="content">提供清算css属性：

#content{
  clear:both;
}

Answer 3

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

我首选的方法是 Nicholas Gallagher's "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: both添加到#content也会工作，但是更好的clearfix解决方案是优选的，因为简单地添加clear: both将解决#content的浮动定位问题，但不会强制#header包含其中的两个浮动元素。

清除浮动效果而不使用明确的div

3 个答案: