雨夜带刀's Blog

CSS清除浮动

<p>“90%的CSS布局的兼容问题都是浮动布局引起的”,这是我无意中听到某位前端人员的抱怨。</p>
<p>某位新手朋友经常问起我浮动布局的时候该如何清除浮动,我回答过N次,但这位新手朋友好像始终记不住,总是会在这里出问题,包括我自己也时常会在这个问题上纠结。上面提到的90%的这个概率可能并不准确,但也反映出了前端人员在这个问题上或多或少的要纠结一番,新手会时常犯难,老手也不一定就不犯傻。</p>
<p>我总结了一下以往几种清除浮动的方法,发觉方法还是挺多的,那么有没有一种最优的方法可以实现一劳永逸呢?且看下面的几种方法先。</p>
<h3>空标签法</h3>
<p>在浮动元素后加一个空标签,空标签上定义一个清除浮动的类:</p>
<pre class="brush: c-sharp">
&lt;style type="text/css"&gt;
.clear{ clear:both;height:0;overflow:hidden; }
.float_left{ float:left; }
.float_right{ float:left; }
&lt;/style&gt;
<div class="float_left">左浮动元素</div>
<div class="float_right">右浮动元素</div>
<div class="clear"></div>
</pre>

头像

雨夜带刀

前端开发工程师,技术宅,现居北京。

雨夜带刀的开源项目

easy.js
一个简洁的 JavaScript 类库,集成了模块加载器,同时也有包含了常见的的组件库,可访问项目网站
seed
符合 AMD 规范的 JavaScript 模块加载器。
ecope
从 easy.js 组件库中移值过来的基于 jQuery 的组件库,简单实用,API 风格统一。