閉合浮動 與 清除浮動 的區別

時間  2019-11-18
標籤 閉合 浮動 清除 區別 简体版
原文   原文鏈接 
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="Keywoeywords" content="" />
<meta name="Description" content="" />
<title>那些年咱們一塊兒清除過的浮動-Demo- 雲路科技</title>
<style>
* { margin:0; padding:0; }
a { text-decoration:none; color: #333; }
h1 { font-size: 22px; margin-top: 10px; padding: 10px 0; text-align: center; }
h2 { font-size:16px; margin:20px 0; text-align:center; color:#555; }
h3 { font-size:14px; color:#666; padding:10px 0; }
.clearfix:after { clear:both; content:"."; display:block; height:0; visibility:hidden; }
.clearfix { *zoom:1;}
.clear { clear:both; }
.left { float:left; }
.right { float:right; }
.left, .right { *display:inline;
}
div { padding:15px 20px; font-size:14px; color:#333; }
.content { padding-bottom:200px; }
.warp { border:1px solid blue; width:600px; margin:30px auto 5px; background:#F5F5F5; }
.main { height:60px; width:50%; background:#FFE3D7; }
.side { width:20%; background:lightblue; }
.footer { border:1px solid #CCC; background:#EEE; width:600px; margin:5px auto 30px; }
</style>
</head>
<body>
<div class="content">
  <h1><a href="http://www.iyunlu.com/view/css-xhtml/those-years-we-have-cleared-with-floats.html" target="_blank" title="返回文章">返回文章：那些年咱們一塊兒清除過的浮動</a></h1>
  <h2>閉合浮動 與  清除浮動 的區別</h2>
  <div class="warp">
    <div class="main left">.main：很抱歉，現代瀏覽器中我沒能把warp撐高(float:left)</div>
    <div class="side left">.side：我也浮動了(float:left)</div>
  </div>
  <div class="footer clear">.footer：我經過設置 clear:both <strong>清除浮動</strong>,雖然位置正確了,可是 warp 的高度沒變,有些不爽</div>
  <div class="warp clearfix" id="floa7">
    <div class="main left">.main：warp本身閉合浮動了，因此footer不用再清除浮動了(float:left)</div>
    <div class="side left">.side：我也浮動了(float:left)</div>
  </div>
  <div class="footer">.footer：此次 warp 人品爆發了, 經過 .clearfix 已經<strong>閉合浮動</strong>了</div>
  <h2>閉合浮動的幾種方法</h2>
  <div class="warp" id="float1">
    <h3>1）添加額外標籤</h3>
    <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">
    <h3>2）使用 br標籤和其自身的 html屬性</h3>
    <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;">
    <h3>3)父元素設置 overflow：hidden</h3>
    <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="float6" style="display:table;">
    <h3>6）父元素設置display:table</h3>
    <div class="main left">.main{float:left;}</div>
    <div class="side left">.side{float:right;}</div>
  </div>
  <div class="footer">.footer</div>
</div>
</body>
</html>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程