clear：两个属性都不适用于响应式水平菜单(clear:both attribute not working on responsive horizontal menu)

我的响应式水平菜单与我的页脚内联。请参阅此处的完整演示。这不应该发生，因为我希望页脚（灰色位）出现在我的水平菜单栏下面，因为我需要在响应水平菜单栏和页脚之间添加更多元素。

我试图补充说明：两者之间都没有成功。

HTML：

<div class="horizontalmenubar"> <label for="show-menu" class="show-menu">Show Menu</label> <input type="checkbox" id="show-menu" role="button"> <ul id="menu"> <li><a href="#">Home</a></li> <li> <a href="#">About ￬</a> <ul class="hidden"> <li><a href="#">Who We Are</a></li> <li><a href="#">What We Do</a></li> </ul> </li> <li> <a href="#">Portfolio ￬</a> <ul class="hidden"> <li><a href="#">Photography</a></li> <li><a href="#">Web & User Interface Design</a></li> <li><a href="#">Illustration</a></li> </ul> </li> <li><a href="#">News</a></li> <li><a href="#">Contact</a></li> </ul> </div> <footer id="footer"> <section> <h3>ABOUT US:</h3> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<br>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<br></p> </section> <section> <h3>LIKE, FOLLOW OR WATCH US:</h3> <ul class="social"> <li><a href="#"><img src="http://www.w3newbie.com/wp-content/uploads/facebook.png"/></a></li> <li><a href="#"><img src="http://www.w3newbie.com/wp-content/uploads/twitter1.png"/></a></li> <li><a href="#"><img src="http://www.w3newbie.com/wp-content/uploads/youtube.png"/></a></li> </ul> </section> <section> <h3>CONTACT US:</h3> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. <br><br><b>abcd@efghi.com</b><br><br>00 12 34 567890<br>ACME Ltd<br>1 Acme Road<br>Acme City<br>USA</p> </section> </footer> <footer class="footerTwo"> <p> Copyright © 2015 | ACME Ltd | All rights reserved.</p> </footer>

CSS：

/* Full width styling */ * { margin: 0; border: 0; padding: 0; } body { background: #F5F5F5; color: #363636; margin: 0; font-family: "Helvetica Neue", Arial, sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; line-height: 20px; } h1 { text-align: center; font-size: 100%; line-height: 120%; padding: 5% 0 5% 0; } h2 { line-height: 280%; padding-left: 3%; text-decoration: underline; } h3 { line-height: 120%; padding: 5% 0 5% 0; } p { padding: 1%; } img { text-align: center; max-width: 100%; height: auto; width: auto; } a { color: #FFFFFF; font-weight: bold; font-size: 20px; text-decoration: none; } a:hover { color: #FFFFFF; font-weight: bold; text-decoration: underline; } header { background-color: #3366FF; width: 100%; height: 86px; position: fixed; top: 0; left: 0; z-index: 100; opacity: 0.90%; } #logo { margin: 0px; float: left; width: 200px; height: 86px; background: url("../images/logo.png") no-repeat center; } nav { float: right; padding: 25px 20px 20px 0; } #menu-icon { display: hidden; width: 100px; height: 86px; background: url(http://www.w3newbie.com/wp-content/uploads/icon.png); padding: 0; margin: 0; } a:hover#menu-icon { border-radius: 2px 2px 0 0; } ul { list-style: none; } nav ul li { display: inline-block; float: left; padding: 10px; } nav ul li a:hover { color: #363636; text-decoration: none; } section { width: 29%; float: left; margin: 2% 2% 2% 2%; text-align: center; } .clear { clear: both; } #genericlinkdecoration { color: #3366FF; text-decoration: none; font-weight: bold; font-size: 14px; } footer { background-color: #808080; width: 100%; overflow: hidden; } footer p, footer h3 { color: #FFFFFF; } footer p a { color: #FFFFFF; text-decoration: none; font-weight: normal; font-size: 14px; } ul.social li { display: inline; } ul.social img { height: 50px; } footer.footerTwo { border-top: 1px solid #4D4350; background-color: #3366FF; text-align: center; } /* Media queries */ @media only screen and (max-width: 760px) { body { position: absolute; } header { position: absolute; } #menu-icon { display: inline-block; } nav { padding: 0; } nav ul, nav:active ul { display: none; position: absolute; background: #FFFFFF; border: 1px solid #D6D6D6; right: 20px; top: 60px; width: 50%; border-radius: 2px; } nav:hover ul { display: block; } nav ul li a { color: #363636; text-decoration: none; } nav ul li a:hover { color: #3366FF; text-decoration: none; } nav li { width: 100%; margin: 0; } section { float: left; width: 100%; margin: 0; padding: 0; } } .horizontalmenubar { margin-top: 86px; background: #33DD00; } /*Strip the ul of padding and list styling*/ .horizontalmenubar ul { list-style-type:none; margin:0; padding:0; position: absolute; } /*Create a horizontal list with spacing*/ .horizontalmenubar li { display:inline-block; float: left; margin-right: 1px; } /*Style for menu links*/ .horizontalmenubar li a { display:block; min-width:140px; height: 50px; text-align: center; line-height: 50px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; color: #fff; background: #2f3036; text-decoration: none; } /*Hover state for top level links*/ .horizontalmenubar li:hover a { background: #19c589; } /*Style for dropdown links*/ .horizontalmenubar li:hover ul a { background: #f3f3f3; color: #2f3036; height: 40px; line-height: 40px; } /*Hover state for dropdown links*/ .horizontalmenubar li:hover ul a:hover { background: #19c589; color: #fff; } /*Hide dropdown links until they are needed*/ .horizontalmenubar li ul { display: none; } /*Make dropdown links vertical*/ .horizontalmenubar li ul li { display: block; float: none; } /*Prevent text wrapping*/ .horizontalmenubar li ul li a { width: auto; min-width: 100px; padding: 0 20px; } /*Display the dropdown on hover*/ .horizontalmenubar ul li a:hover + .hidden, .hidden:hover { display: block; } /*Style 'show menu' label button and hide it by default*/ .show-menu { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; text-decoration: none; color: #fff; background: #19c589; text-align: center; padding: 10px 0; display: none; } /*Hide checkbox*/ .horizontalmenubar input[type=checkbox]{ display: none; } /*Show menu when invisible checkbox is checked*/ .horizontalmenubar input[type=checkbox]:checked ~ #menu{ display: block; } /*Responsive Styles*/ @media screen and (max-width : 760px){ /*Make dropdown links appear inline*/ .horizontalmenubar ul { position: static; display: none; } /*Create vertical spacing*/ .horizontalmenubar li { margin-bottom: 1px; } /*Make all menu links full width*/ .horizontalmenubar ul li, li a { width: 100%; } /*Display 'show menu' link*/ .show-menu { display:block; } }

任何帮助表示赞赏。

I've got my responsive horizontal menu which appears inline with my footer. See FULL demo here. This should not happen as I want the footer (grey bit) to appear under my horizontal menu bar as I need to add more elements between my responsive horizontal menu bar and the footer.

I attempted adding clear: both in between both but no success.

HTML:

<div class="horizontalmenubar"> <label for="show-menu" class="show-menu">Show Menu</label> <input type="checkbox" id="show-menu" role="button"> <ul id="menu"> <li><a href="#">Home</a></li> <li> <a href="#">About ￬</a> <ul class="hidden"> <li><a href="#">Who We Are</a></li> <li><a href="#">What We Do</a></li> </ul> </li> <li> <a href="#">Portfolio ￬</a> <ul class="hidden"> <li><a href="#">Photography</a></li> <li><a href="#">Web & User Interface Design</a></li> <li><a href="#">Illustration</a></li> </ul> </li> <li><a href="#">News</a></li> <li><a href="#">Contact</a></li> </ul> </div> <footer id="footer"> <section> <h3>ABOUT US:</h3> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<br>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<br></p> </section> <section> <h3>LIKE, FOLLOW OR WATCH US:</h3> <ul class="social"> <li><a href="#"><img src="http://www.w3newbie.com/wp-content/uploads/facebook.png"/></a></li> <li><a href="#"><img src="http://www.w3newbie.com/wp-content/uploads/twitter1.png"/></a></li> <li><a href="#"><img src="http://www.w3newbie.com/wp-content/uploads/youtube.png"/></a></li> </ul> </section> <section> <h3>CONTACT US:</h3> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. <br><br><b>abcd@efghi.com</b><br><br>00 12 34 567890<br>ACME Ltd<br>1 Acme Road<br>Acme City<br>USA</p> </section> </footer> <footer class="footerTwo"> <p> Copyright © 2015 | ACME Ltd | All rights reserved.</p> </footer>

CSS:

/* Full width styling */ * { margin: 0; border: 0; padding: 0; } body { background: #F5F5F5; color: #363636; margin: 0; font-family: "Helvetica Neue", Arial, sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; line-height: 20px; } h1 { text-align: center; font-size: 100%; line-height: 120%; padding: 5% 0 5% 0; } h2 { line-height: 280%; padding-left: 3%; text-decoration: underline; } h3 { line-height: 120%; padding: 5% 0 5% 0; } p { padding: 1%; } img { text-align: center; max-width: 100%; height: auto; width: auto; } a { color: #FFFFFF; font-weight: bold; font-size: 20px; text-decoration: none; } a:hover { color: #FFFFFF; font-weight: bold; text-decoration: underline; } header { background-color: #3366FF; width: 100%; height: 86px; position: fixed; top: 0; left: 0; z-index: 100; opacity: 0.90%; } #logo { margin: 0px; float: left; width: 200px; height: 86px; background: url("../images/logo.png") no-repeat center; } nav { float: right; padding: 25px 20px 20px 0; } #menu-icon { display: hidden; width: 100px; height: 86px; background: url(http://www.w3newbie.com/wp-content/uploads/icon.png); padding: 0; margin: 0; } a:hover#menu-icon { border-radius: 2px 2px 0 0; } ul { list-style: none; } nav ul li { display: inline-block; float: left; padding: 10px; } nav ul li a:hover { color: #363636; text-decoration: none; } section { width: 29%; float: left; margin: 2% 2% 2% 2%; text-align: center; } .clear { clear: both; } #genericlinkdecoration { color: #3366FF; text-decoration: none; font-weight: bold; font-size: 14px; } footer { background-color: #808080; width: 100%; overflow: hidden; } footer p, footer h3 { color: #FFFFFF; } footer p a { color: #FFFFFF; text-decoration: none; font-weight: normal; font-size: 14px; } ul.social li { display: inline; } ul.social img { height: 50px; } footer.footerTwo { border-top: 1px solid #4D4350; background-color: #3366FF; text-align: center; } /* Media queries */ @media only screen and (max-width: 760px) { body { position: absolute; } header { position: absolute; } #menu-icon { display: inline-block; } nav { padding: 0; } nav ul, nav:active ul { display: none; position: absolute; background: #FFFFFF; border: 1px solid #D6D6D6; right: 20px; top: 60px; width: 50%; border-radius: 2px; } nav:hover ul { display: block; } nav ul li a { color: #363636; text-decoration: none; } nav ul li a:hover { color: #3366FF; text-decoration: none; } nav li { width: 100%; margin: 0; } section { float: left; width: 100%; margin: 0; padding: 0; } } .horizontalmenubar { margin-top: 86px; background: #33DD00; } /*Strip the ul of padding and list styling*/ .horizontalmenubar ul { list-style-type:none; margin:0; padding:0; position: absolute; } /*Create a horizontal list with spacing*/ .horizontalmenubar li { display:inline-block; float: left; margin-right: 1px; } /*Style for menu links*/ .horizontalmenubar li a { display:block; min-width:140px; height: 50px; text-align: center; line-height: 50px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; color: #fff; background: #2f3036; text-decoration: none; } /*Hover state for top level links*/ .horizontalmenubar li:hover a { background: #19c589; } /*Style for dropdown links*/ .horizontalmenubar li:hover ul a { background: #f3f3f3; color: #2f3036; height: 40px; line-height: 40px; } /*Hover state for dropdown links*/ .horizontalmenubar li:hover ul a:hover { background: #19c589; color: #fff; } /*Hide dropdown links until they are needed*/ .horizontalmenubar li ul { display: none; } /*Make dropdown links vertical*/ .horizontalmenubar li ul li { display: block; float: none; } /*Prevent text wrapping*/ .horizontalmenubar li ul li a { width: auto; min-width: 100px; padding: 0 20px; } /*Display the dropdown on hover*/ .horizontalmenubar ul li a:hover + .hidden, .hidden:hover { display: block; } /*Style 'show menu' label button and hide it by default*/ .show-menu { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; text-decoration: none; color: #fff; background: #19c589; text-align: center; padding: 10px 0; display: none; } /*Hide checkbox*/ .horizontalmenubar input[type=checkbox]{ display: none; } /*Show menu when invisible checkbox is checked*/ .horizontalmenubar input[type=checkbox]:checked ~ #menu{ display: block; } /*Responsive Styles*/ @media screen and (max-width : 760px){ /*Make dropdown links appear inline*/ .horizontalmenubar ul { position: static; display: none; } /*Create vertical spacing*/ .horizontalmenubar li { margin-bottom: 1px; } /*Make all menu links full width*/ .horizontalmenubar ul li, li a { width: 100%; } /*Display 'show menu' link*/ .show-menu { display:block; } }

Any help is appreciated.