CSS边框问题：无法呈现左边框答案

【问题标题】：CSS border Issue : failing to render left borderCSS边框问题：无法呈现左边框
【发布时间】：2011-12-03 13:30:47
【问题描述】：

我试图在左侧显示一个边框，但在第一个 div(breadCrumb) 之后没有显示。 HTML 代码如下：-

<div class="contentHolder">
    <div class="breadCrumb">
        <a href="http://www.pricetag.com">Store </a>>>&nbsp;Electronics 
    </div>
    <div class="contentMainDiv">
        <div class="leftDiv"><p>orem ipsume Lorem ipsume Lorem ipsume Lorem ipsume</p>
        </div>
        <div class="rightDiv">
        </div>
    </div>
</div>

CSS 代码如下：

.contentHolder { 填充：10px 0 0 10px;左边框：1px 实心#CCC； }

.contentHolder div.breadCrumb { font-size:12px; }

.contentHolder div.breadCrumb {color:#408080;文字装饰：无； }

.contentHolder div.breadCrumb a:hover {text-decoration:underline; }

.contentHolder div.leftDiv{ float:left;宽度：150px； }

.contentHolder div.rightDiv { float:left;}

以下是错误页面的图片：-

【问题讨论】：

标签： html css

【解决方案1】：

您可以将float: left; 或display: inline-block; 添加到.contentHolder

.contentHolder {
  padding: 10px 0 0 10px;
  border-left: 1px solid #CCC;
  float: left;
}

两者都应该工作。

【讨论】：

【解决方案2】：

.contentHolder div.leftDiv{ float:left; width: 150px; }

删除浮动：left 或使用 clearfix http://perishablepress.com/press/2009/12/06/new-clearfix-hack/ 用于 contentHolder 类

预览http://jsfiddle.net/TrePF/

.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
    }
.clearfix { display: inline-table; }
/* Hides from IE-mac \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */
.contentHolder { padding: 10px 0 0 10px; border-left: 1px solid #CCC; }

.contentHolder div.breadCrumb { font-size:12px; }

.contentHolder div.breadCrumb a {color:#408080; text-decoration:none; }

.contentHolder div.breadCrumb a:hover {text-decoration:underline; }

.contentHolder div.leftDiv{ float:left; width: 150px; }

.contentHolder div.rightDiv { float:left;}

<div class="contentHolder clearfix">
    <div class="breadCrumb">
        <a href="http://www.pricetag.com">Store </a>>>&nbsp;Electronics 
    </div>
    <div class="contentMainDiv">
        <div class="leftDiv"><p>orem ipsume Lorem ipsume Lorem ipsume Lorem ipsume</p>
        </div>
        <div class="rightDiv">
        </div>
    </div>
</div>

【讨论】：

【解决方案3】：

你需要在.contentMainDiv中clear/contain the floated elements。

一种方法是添加overflow: hidden。

【讨论】：

我对 CSS 技术有点陌生。您能否编辑您的答案并告诉我应该如何以及何时使用 clear。我的项目有很多浮动元素，所以我需要知道何时使用它以及如何使用它。谢谢
您只需将overflow: hidden 添加到元素的父元素，并将float 设置为left 或right: jsfiddle.net/AavNv
是的，我明白了。那么，这是否足以解决所有问题，我不需要担心 clearfix 和 clear:both 属性？我在某个地方读到了关于浮动的内容，所以询问了他们。
Clearfix 是一种不同的清除浮动的方法。这以相同的方式工作 - 不是将overflow: hidden 应用于浮动元素的父级，而是应用class="clearfix"。 overflow: hidden 几乎适用于所有情况，而且更简单。 clear: both 可以做同样的事情，但它涉及到每次你想清除浮动时添加一个额外的<div>，所以不要这样做。 clear: both 唯一真正的用途是在您已经拥有该元素的情况下，例如两个浮动列下方的页脚。