css – 与twitter引导的Clearfix

前端之家收集整理的这篇文章主要介绍了css – 与twitter引导的Clearfix前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个twitter bootstrap的问题,对我来说有点奇怪。我有一个左侧固定的侧边栏和一个主要区域。
  1. <div>
  2. <div id="sidebar">
  3. <ul>
  4. <li>A</li>
  5. <li>A</li>
  6. <li>C</li>
  7. <li>D</li>
  8. <li>E</li>
  9. <li>F</li>
  10. <li>...</li>
  11. <li>Z</li>
  12. </ul>
  13. </div>
  14. <div id="main">
  15. <div class="clearfix">
  16. <div class="pull-right">
  17. <a>RIGHT</a>
  18. </div>
  19. </div>
  20. <div>MOVED BELOW Z</div>
  21. </div>
  1. #sidebar {
  2. background: red;
  3. float: left;
  4. width: 100px;
  5. }
  6.  
  7. #main {
  8. background: green;
  9. margin-left: 150px;
  10. overflow: hidden;
  11. }

在主要区域内,我有一些内容与左 – 左和右 – 右通过一个clearfix清除。

问题是clearfix-div下面的内容被移动到低于边栏内容

我为此做了一个小提琴:http://jsfiddle.net/ZguC7/

我通过将“overflow:collapse”设置为#main来解决问题,但是我不明白它,如果有人可以解释是什么导致这个问题,我会很高兴。

解决方法

clearfix应该包含浮动元素,但是在您的html中,只有在您右拉右侧之后才添加clearfix,所以您应该这样做:
  1. <div class="clearfix">
  2. <div id="sidebar">
  3. <ul>
  4. <li>A</li>
  5. <li>A</li>
  6. <li>C</li>
  7. <li>D</li>
  8. <li>E</li>
  9. <li>F</li>
  10. <li>...</li>
  11. <li>Z</li>
  12. </ul>
  13. </div>
  14. <div id="main">
  15. <div>
  16. <div class="pull-right">
  17. <a>RIGHT</a>
  18. </div>
  19. </div>
  20. <div>MOVED BELOW Z</div>
  21. </div>

see this demo

很高兴认识您通过设置溢出属性解决问题。然而,这也是清除浮动的好主意。你漂浮了你的元素,你可以添加overflow:hidden;正如你在主要做的那样。

猜你在找的CSS相关文章