gpt4 book ai didi

css - 带有 Twitter Bootstrap 的 Clearfix

转载 作者:技术小花猫 更新时间:2023-10-29 10:07:00 27 4
gpt4 key购买 nike

我有一个关于 Twitter bootstrap 的问题,我觉得它有点奇怪。我有一个固定在左侧的侧边栏和一个主要区域。

<div>
<div id="sidebar">
<ul>
<li>A</li>
<li>A</li>
<li>C</li>
<li>D</li>
<li>E</li>
<li>F</li>
<li>...</li>
<li>Z</li>
</ul>
</div>
<div id="main">
<div class="clearfix">
<div class="pull-right">
<a>RIGHT</a>
</div>
</div>
<div>MOVED BELOW Z</div>
</div>

#sidebar {
background: red;
float: left;
width: 100px;
}

#main {
background: green;
margin-left: 150px;
overflow: hidden;
}

在主要区域中,我有一些左拉和右拉的内容被 clearfix 清除了。

问题是 clearfix-div 下面的内容被移动到低于 sidebar-content 的位置。

我为此做了一个 fiddle :http://jsfiddle.net/ZguC7/

我通过将“溢出:崩溃”设置为#main 解决了这个问题,但我不明白它,如果有人能解释导致这个问题的原因,我会很高兴。

最佳答案

clearfix 应该包含 float 元素,但在您的 html 中,您仅在 float 右侧之后添加了 clearfix,即您的 pull-right 所以您应该这样做:

<div class="clearfix">
<div id="sidebar">
<ul>
<li>A</li>
<li>A</li>
<li>C</li>
<li>D</li>
<li>E</li>
<li>F</li>
<li>...</li>
<li>Z</li>
</ul>
</div>
<div id="main">
<div>
<div class="pull-right">
<a>RIGHT</a>
</div>
</div>
<div>MOVED BELOW Z</div>
</div>

see this demo


很高兴知道您通过设置溢出属性解决了这个问题。然而,这也是清除 float 的好主意。您可以在 float 元素的位置添加 overflow: hidden;,就像您在 main 中所做的那样。

关于css - 带有 Twitter Bootstrap 的 Clearfix,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18630587/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com