为啥使用 <div class="clear"></div>？
Posted
技术标签:
【中文标题】为啥使用 <div class="clear"></div>？【英文标题】：Why <div class="clear"></div> used?为什么使用 <div class="clear"></div>？ 【发布时间】：2014-02-09 15:11:40 【问题描述】：我会让自己适应52framework.com 提供的服务。 （html5、CSS3、JS 框架）
尽管观看了网格教程视频并检查了其他 demo 源代码，但我无法理解为什么框架在第 12 行使用 <div class="clear"></div><!-- clear --> 代码。
下面的代码地址是：http://demo.52framework.com/demos/framework/grid.html
<body>
<div class="row">
<header>
<div class="logo col_7 col">52framework</div><!-- logo col_7 -->
<nav class="col_9 col">
<ul>
<li><a href="#navigation">navigation 1</a></li>
<li><a href="#navigation">navigation 2</a></li>
<li class="last"><a href="http://www.enavu.com">enavu network</a></li>
</ul>
</nav><!-- nav col_9 -->
<div class="clear"></div><!-- clear -->
</header>
</div><!-- row -->
...
下面的代码也来自同一来源，但正如您所见，<div class="clear"></div><!-- clear --> 此处未使用一段代码，即使此处已完成更多分区。
<!-- this section shows off the grid and how it can be used -->
<section class="row" id="grid">
<h2>Grid Framework</h2>
<div class="col col_8">
col_8
<div class="row">
<div class="col col_1">col_1</div>
<div class="col col_7">col_7
<div class="row">
<div class="col col_3">col_3</div>
<div class="col col_4">col_4</div>
</div><!-- row -->
</div>
</div><!-- row -->
</div><!-- col_8 -->
<div class="col col_8">
col_8
<div class="row">
<div class="col col_4">4</div>
<div class="col col_4">4</div>
</div><!-- row -->
</div><!-- col_8 -->
<div class="col_16 col" style="margin-top:15px;">
<div class="row">
<div class="col col_9">col_9</div>
<div class="col col_7">col_7</div>
</div><!-- row -->
</div><!-- col_16 -->
<div class="col_16 col">
<a href="http://www.52framework.com/documentation/" class="documentation">Grid Framework Documentation</a>
</div><!-- col_16 -->
</section><!-- row -->
相关CSS代码：
.clear clear:both; display:block; overflow:hidden; visibility:hidden; height:0px;
.col
margin-left:10px; margin-right:10px;
display: inline;
overflow: hidden;
float: left;
position: relative;
.row
width: 960px;
margin: 0 auto;
overflow: hidden;
.row .row
margin: 0 -10px;
width: auto;
display: inline-block;
/* Column widths, and element width based on grid */
.col_1, .width_1 width:40px;
.col_2, .width_2 width:100px;
.col_3, .width_3 width:160px;
.col_4, .width_4 width:220px;
.col_5, .width_5 width:280px;
.col_6, .width_6 width:340px;
.col_7, .width_7 width:400px;
.col_8, .width_8 width:460px;
.col_9, .width_9 width:520px;
.col_10, .width_10 width:580px;
.col_11, .width_11 width:640px;
.col_12, .width_12 width:700px;
.col_13, .width_13 width:760px;
.col_14, .width_14 width:820px;
.col_15, .width_15 width:880px;
.col_16, .width_16 width:940px;
【问题讨论】：
需要修复两列问题（使用float-prop）***.com/questions/211383/…你可以删的更清楚，自己看 它可以清除所有以前的浮动对齐方式，例如向左或向右浮动等。 【参考方案1】：这是一个用于clear the float property 你的nav 通过它的.col 类获得的方法。如果没有这个，nav 元素后面的内容可能会出现在 nav 元素旁边，而不是在它下面。
如需进一步阅读，请参阅 Chris Coyier 的The How and Why of Clearing Floats。
【讨论】：
@Andre 还值得一提的是，大多数开发人员现在通过使用容器上的“after”伪元素来清除内容子元素上的浮动，从而避免了仅仅为了清除浮动而需要额外的元素。由于溢出值，“row”类将有效清除第二个示例中任何子元素的浮动，但我不得不说这不再被认为是最佳实践，您可能想查看另一个 CSS 框架.以上是关于为啥使用 <div class="clear"></div>？的主要内容，如果未能解决你的问题，请参考以下文章
为啥“div[class=mncls sbucls]”有效，而“div.mncls sbucls”无效？
layui的CSS 和layui.all.js 文件分别载入文件后，为啥对DIV里的设置了对应的class却出不了结果