本文介绍了清除浮动问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 29岁程序员，3月因学历无情被辞！ 我有一个页面，标准的导航栏在左边，内容区域占据水平区域的其余部分。对于现代浏览器，我使用table-row和table-cell值作为显示属性。但是，对于IE7，我包括一个条件样式表，试图浮动导航栏。 这很好，除非内容区域本身有浮动的元素， 。我的目标是在内容区域浮动之后立即显示清除元素，而是在导航区域下面显示。 以下演示代码显示了此问题。我的目标是让表格显示在leftThing和rightThing下面，但是它们和表格之间有很大的差距。 < html> < head> < title>浮动测试< / title> < style type =text / css> #body { background：#cecece; } #sidebar { background：#ababab; float：left; width：200px; } #content { background：#efefef; margin-left：215px; } #leftThing { background：＃456789; float：left; width：100px; } #rightThing { background：＃654321; float：right; width：100px; } 表{ clear：both; } < / style> < / head> < body> < div id =body> < div id =sidebar> < ul> < li>一个< / li> < li>两个< / li> < li>三< / li> < / ul> < / div> < div id =content> < div style =position：realtive;> < div id =leftThing> ABCDEF < / div> < div id =rightThing> WXYZ < / div> < table> < thead> < th>一个< / th> < th>两个< / th> < / thead> < tr> < td> Jason< / td> < td> 45< / td> < / tr> < tr> < td> Mary< / td> < td> 41< / td> < / tr> < / table> < p> Exerci ullamcorper consequrates duis ipsum ut nostrud zzril，feugait feugiat duis dolor feugiat commodo，accumsan，duis illum eum molestie luptatum nisl iusto。 Commodo minimal ullamcorper blandit，nostrud feugiat blandit esse dolore，consequat vulputate augue sit ad。 Facilisi feugait luptatum eu minim wisi，facilisis molestie wisi in in amet vero quis。< / p> < / div> < / div> < / div> < / body> < / html>感谢您的帮助。 解决方案只需在表格上清除，然后清除底部的nav。请参阅下面的更新代码。 < html& < head> < title>浮动测试< / title> < style type =text / css> #body { background：#cecece; } #sidebar { background：#ababab; float：left; width：200px; } #content { background：#efefef; margin-left：215px; } #leftThing { background：＃456789; float：left; width：100px; } #rightThing { background：＃654321; float：right; width：100px; } 表 {清除：right; } < / style> < / head> < body> < div id =body> < div id =sidebar> < ul> < li>一个< / li> < li>两个< / li> < li>三< / li> < / ul> < / div> < div id =content> < div> < div id =leftThing> ABCDEF< / div> < div id =rightThing> WXYZ< / div> < tables> < thead> < th>一个< / th> < th>两个< / th> < / thead> < tr> < td> Jason< / td> < td> 45< / td> < / tr> < tr> < td> Mary< / td> < td> 41< / td> < / tr> < / table> < p> Exerci ullamcorper consequrates duis ipsum ut nostrud zzril，feugait feugiat duis dolor feugiat commodo，accumsan，duis illum eum molestie luptatum nisl iusto。 Commodo minimal ullamcorper blandit，nostrud feugiat blandit esse dolore，consequat vulputate augue sit ad。 Facilisi feugait luptatum eu minim wisi，facilisis molestie wisi in in amet vero quis。< / p> < / div> < / div> < div style =clear：both;>< / div> < / div> < / body> < / html> I have a page with the standard navigation bar on the left and the content area taking up the rest of the horizontal area to its side. For modern browsers I am using table-row and table-cell values for the display attribute. However, for IE7 I included a conditional stylesheet that tries to float the nav bar.This works fine except when the content area itself has floated elements and I try to use clear. My goal is to displayed the clear element right after the content area floats but instead it gets shoved down below the nav area.The following demo code shows this issue. My goal is to get the table to display right below the "leftThing" and "rightThing" but instead there is a large gap between them and the table.<html> <head> <title>Float Test</title> <style type="text/css"> #body { background: #cecece; } #sidebar { background: #ababab; float: left; width: 200px; } #content { background: #efefef; margin-left: 215px; } #leftThing { background: #456789; float: left; width: 100px; } #rightThing { background: #654321; float: right; width: 100px; } table { clear: both; } </style> </head> <body> <div id="body"> <div id="sidebar"> <ul> <li>One</li> <li>Two</li> <li>Three</li> </ul> </div> <div id="content"> <div style="position: realtive;"> <div id="leftThing"> ABCDEF </div> <div id="rightThing"> WXYZ </div> <table> <thead> <th>One</th> <th>Two</th> </thead> <tr> <td>Jason</td> <td>45</td> </tr> <tr> <td>Mary</td> <td>41</td> </tr> </table> <p>Exerci ullamcorper consequat duis ipsum ut nostrud zzril, feugait feugiat duis dolor feugiat commodo, accumsan, duis illum eum molestie luptatum nisl iusto. Commodo minim ullamcorper blandit, nostrud feugiat blandit esse dolore, consequat vulputate augue sit ad. Facilisi feugait luptatum eu minim wisi, facilisis molestie wisi in in amet vero quis.</p> </div> </div> </div> </body></html>Thank you for your help. 解决方案 Just clear right on the table, and then clear the nav at the bottom. See updated code below.<html> <head> <title>Float Test</title> <style type="text/css"> #body { background: #cecece; } #sidebar { background: #ababab; float: left; width: 200px; } #content { background: #efefef; margin-left: 215px; } #leftThing { background: #456789; float: left; width: 100px; } #rightThing { background: #654321; float: right; width: 100px; } table { clear: right; } </style> </head> <body> <div id="body"> <div id="sidebar"> <ul> <li>One</li> <li>Two</li> <li>Three</li> </ul> </div> <div id="content"> <div> <div id="leftThing">ABCDEF</div> <div id="rightThing">WXYZ</div> <table> <thead> <th>One</th> <th>Two</th> </thead> <tr> <td>Jason</td> <td>45</td> </tr> <tr> <td>Mary</td> <td>41</td> </tr> </table> <p>Exerci ullamcorper consequat duis ipsum ut nostrud zzril, feugait feugiat duis dolor feugiat commodo, accumsan, duis illum eum molestie luptatum nisl iusto. Commodo minim ullamcorper blandit, nostrud feugiat blandit esse dolore, consequat vulputate augue sit ad. Facilisi feugait luptatum eu minim wisi, facilisis molestie wisi in in amet vero quis.</p> </div> </div> <div style="clear: both;"></div> </div> </body></html> 这篇关于清除浮动问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！
