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>JS Bin</title>
</head>
<body>
  <div class="warp" id="float">
    <h2>默认情况</h2>
    <div class="main left">.main{float:left;}</div>
    <div class="side left">.side{float:right;}</div>
  </div>
  <div class="footer">.footer</div>
  
  <div class="warp" id="float">
    <h2>clear: both;清除浮动</h2>
    <div class="main left">.main{float:left;}</div>
    <div class="side left">.side{float:right;}</div>
  </div>
  <div class="footer clear">.footer我通过设置 clear:both 清除浮动,虽然位置正确了,但是 warp 的高度没变</div>
  
  <div class="warp clearfix" id="float">
    <h2>7）.clearfix闭合浮动</h2>
    <div class="main left">.main{float:left;}</div>
    <div class="side left">.side{float:right;}</div>
  </div>
  <div class="footer">.footer这次 warp  通过 .clearfix 已经闭合浮动了</div>
  
  <div class="warp" id="float1">
    <h2>1）添加额外标签</h2>
    <div class="main left">.main{float:left;}</div>
    <div class="side left">.side{float:right;}</div>
    <div style="clear:both;"></div>
    </div>
  <div class="footer">.footer</div>
  
  <div class="warp" id="float2">
    <h2>2）使用 br标签和其自身的 html属性</h2>
    <div class="main left">.main{float:left;}</div>
    <div class="side left">.side{float:right;}</div>
    <br clear="all" />
    </div>
  <div class="footer">.footer</div>
  
  <div class="warp" id="float3" style="overflow:hidden; *zoom:1;">
    <h2>3)父元素设置 overflow:hidden </h2>
    <div class="main left">.main{float:left;}</div>
    <div class="side left">.side{float:right;}</div>
    </div>
  <div class="footer">.footer</div>
  
  <div class="warp" id="float3" style="overflow:auto; *zoom:1;">
    <h2>4)父元素设置 overflow:auto; </h2>
    <div class="main left">.main{float:left;}</div>
    <div class="side left">.side{float:right;}</div>
    </div>
  <div class="footer">.footer</div>
  
  <div class="warp left" id="float3">
    <h2>5)父元素也设置浮动 </h2>
    <div class="main left">.main{float:left;}</div>
    <div class="side left">.side{float:right;}</div>
    </div>
  <div class="footer">.footer</div>
  
  <div class="warp" id="float3" style="display:table; ">
    <h2>6)父元素设置 display:table; </h2>
    <div class="main left">.main{float:left;}</div>
    <div class="side left">.side{float:right;}</div>
    </div>
  <div class="footer">.footer</div>
  <div class="warp" id="float3" style="display:inline-block; ">
    <h2>8)父元素设置 display:table; </h2>
    <div class="main left">.main{float:left;}</div>
    <div class="side left">.side{float:right;}</div>
    </div>
  <div class="footer">.footer</div>
</body>
</html>
Output

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

Dismiss x
public
Bin info
dsky1990pro
0viewers