Css 应用Clearfix时遇到问题_Css_Html_Dreamweaver_Clearfix

Css 应用Clearfix时遇到问题

css html

Css 应用Clearfix时遇到问题,css,html,dreamweaver,clearfix,Css,Html,Dreamweaver,Clearfix,我在HTML5主页的标题部分使用了两个div。最终我想重构为一个包含，但这是另一篇文章。我有第二个div偏移量。我想显示包含对象的整个容器区域-显然，但我遇到了问题 <body> <div class="gridContainer clearfix> <div id="div1" class="fluid"> <header id="headGraphics"> <div id="he

我在HTML5主页的标题部分使用了两个div。最终我想重构为一个包含，但这是另一篇文章。我有第二个div偏移量。我想显示包含对象的整个容器区域-显然，但我遇到了问题

<body>  
<div class="gridContainer clearfix>
    <div id="div1" class="fluid"> 
        <header id="headGraphics">
            <div id="headRectangle1">"Rectangle1"</div>
            <div id="headRectangle2">"Rectangle2"</div>
        </header>
     </div>
</div>
</body>

overflow:hidden

最初工作正常，但我开始在一个表上创建

nav

，我注意到所有内容都丢失了

我想知道如何将附加（多个）类应用于选择器。我可以简单地将

clearfix:before

和

:after

添加到类属性中吗

我使用的是DW-这并不重要，但

同样，溢出正在起作用。我做了什么？

我找到一篇关于堆栈溢出的另一个问题的帖子：

这对我很管用。不知道为什么“溢出：隐藏”在前一分钟有效，而在下一分钟无效

你能把你的代码说得更清楚吗？使用上面的代码，不可能看到您的问题。更好的是，用代码做一个JSFIDLE来显示您的问题。我不确定有多少代码是合适的。我会从小处着手。我不确定有多少代码是合适的。我将从小事做起。更好的是，让我解释一下发生了什么。我假设HTML不需要解释。clearfix选择器位于模板的顶部#headGraphics是包含两个div的容器的标题id:#headlectangle1和#headlectangle2。我所要做的就是在不折叠容器的情况下偏移#headlectangle2。当它折叠时，它会切断底部或div。此外，您可以忽略底部的.gridContainer.clearfix内容。溢出后：hidden对我不起作用，我尝试使用clearfix方法-这就是为什么你在文本底部看到这些东西。

 .clearfix:before, .clearfix:after {
     content:"";
     display: table;
 }
 .clearfix:after {
     clear: both;
 }
 .clearfix {
     *zoom: 1;
 }
 .gridContainer.clearfix #headGraphics #headRectangle1 {
     background-color: #FF0100;
     float: left;
     width: 300px;
     height: 75px;
     position: relative;
 }
 .gridContainer.clearfix #headGraphics #headRectangle2 {
     background-color: #FFC30C;
     float: left;
     /*margin-right: 50px;*/
     width: 300px;
     height: 75px;
     position: relative;
     top: 25px;
     right: 200px;
 }
 .gridContainer.clearfix #headGraphics {
     margin:auto;
     margin-top: 20px;
 }
 #headGraphics {
     overflow: hidden;
 }
 .gridContainer.clearfix #div1 {
 }
 .gridContainer.clearfix #mainNav .navTableGrid {
 }