Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>清除浮动和闭合浮动</title>
</head>
<body>
  <!-- 未使用闭合浮动,底部使用清除浮动 -->
  <h1>清除浮动</h1>
  <div class="not-clear">
    <div class="float-1 fl inner">隔壁的兄弟,我们的父元素怎么没把我们包起来？:(</div>
    <div class="float-2 fl inner">可能是因为我们都浮动了？这不是我们想要的！:(</div>
  </div>
  <div class="not-clear">
        我进行了<span>清除浮动</span>，通过使用<strong>clear:both</strong>     
  </div>
  </br>
  </br>
  <hr></hr>
  <!-- 使用闭合浮动,底部使用清除浮动 -->
  <h1>闭合浮动</h1>
  <div class="not-clear clearfix">
    <div class="float-1 fl inner">我们好像被包起来了诶，总算有点安全感了:)</div>
    <div class="float-2 fl inner">Nice,听说父元素使用了一门叫闭合浮动的技术 :)</div>
    <p>没错，就是<span>闭合浮动</span>，而且是负作用最小的<strong>clearfix</strong></p>
  </div>
  <div class="not-clear">
    我进行了<span>清除浮动</span>，通过使用<strong>clear:both</strong>     
  </div>
  </br>
  </br>
  <hr></hr>
  <!-- 方案总结 -->
  <h1>其他方案？</h1>
  <ul>
    <li>浮动元素后添加相邻标签，设置<strong>clear:both</strong><br>缺陷：增加无意义标签，浪费文档流空间，不符合语义化规范。</li>
    <li>父元素激活BFC
        <ul>
          <li>
              父元素设置<strong>overflow: auto</strong>,兼容IE6, 触发haslayout, 负作用最低hack设置: <strong>*zoom:1</strong>
          </li>
          <li>
             父元素设置<strong>display: table</strong>
          </li>
        </ul>
        <br>
        缺陷： BFC的各种激活方式都具有一定的杀伤性，带来不希望的后果，应该具体情况具体分析，尽可能避免负作用。
    </li>
    <li>
        伪元素:after
        <br>
        目前为止闭合浮动最优选择
    </li>
    
  </ul>
</body>
</html>
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
kylewhpro
0viewers