首页 > itarticle > clearfloatclearfloat

clearfloatclearfloat

admin 11月 12, 2020 0



#div田字格布局 #

##清除浮动 ##
<!DOCTYPE html>
<html>
<head>

</p> <style> #header{ float: left; background-color: blue; width: 200px; height:200px; } #footer{ float: left; background-color: gray; width: 200px; height:200px; } #down{ float: left; background-color: red; width:200px; height: 200px; clear: left; } #down1{ float: left; background-color: orange; width: 200px; height: 200px; } </style> <p></head></p> <div class="language-plaintext highlighter-rouge"> <div class="highlight"> <pre class="highlight"><code><body> <div id="header"></div> <div id="footer"></div> <div id="down"></div> <div id="down1"></div> </body> </html> </code></pre> </div> </div> <p>在红块的代码中，加入 <code class="language-plaintext highlighter-rouge">clear:left</code> ，就会形成四色田子方块，clear是声明不允许有浮动元素</p> <div class="wbp-cbm" wb-share-url="http://it.newban.cn/?p=15042"><a class="wb-btn-dwqr wb-btn-like j-dwqr-like-btn" data-count="0"><svg class="wb-icon wbsico-like"><use xlink:href="#wbsico-dwqr-like"></use></svg><span class="like-count">赞</span></a><a class="wb-btn-dwqr wb-share-poster j-dwqr-poster-btn"><svg class="wb-icon wbsico-poster"><use xlink:href="#wbsico-dwqr-poster"></use></svg><span>微海报</span></a><a class="wb-btn-dwqr wb-btn-share j-dwqr-social-btn"><svg class="wb-icon wbsico-share"><use xlink:href="#wbsico-dwqr-share"></use></svg><span>分享</span></a></div> <!-- IT adsense 1 --> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-6t+ed+2i-1n-4w" data-ad-client="ca-pub-2626449904708114" data-ad-slot="9471729671"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </article> <div class="sidebar"> <div class="sb-inner"> <section id="search-2" class="spmg-bottom widget widget_search"><form class="search-form" id="searchform" action="http://it.newban.cn/" method="get"> <button type="button" class="btn-search" id="searchsubmit"><svg class="wb-icon wbsico-search"><use xlink:href="#wbsico-search"></use></svg></button> <input type="text" class="form-control" name="s" id="s" placeholder="搜索" /> </form></section> <section id="recent-posts-2" class="spmg-bottom widget widget_recent_entries"> <h2 class="widgettitle">近期文章</h2> <ul> <li> <a href="http://it.newban.cn/archives/151996">MYSQL单表数据达2000万性能严重下降，为什么？</a> </li> <li> <a href="http://it.newban.cn/archives/151994">EasyExcel的使用一、介绍和入门使用1、Excel</a> </li> <li> <a href="http://it.newban.cn/archives/151992">处理Exception的几种实践，被很多团队采纳！</a> </li> <li> <a href="http://it.newban.cn/archives/151990">带你学Dubbo—Dubbo监控中心详解Dubbo监控</a> </li> <li> <a href="http://it.newban.cn/archives/151988">项目开发框架-SSM1.Spring2.SpringM</a> </li> </ul> </section><section id="recent-comments-2" class="spmg-bottom widget widget_recent_comments"><h2 class="widgettitle">近期评论</h2> <ul id="recentcomments"><li class="recentcomments"><span class="comment-author-link"><a href='http://118.31.15.172:7779' rel='external nofollow ugc' class='url'>songjianzaina</a></span>发表在《<a href="http://it.newban.cn/archives/7#comment-3">pycharm激活码 更新时间2020年10月1日</a>》</li><li class="recentcomments"><span class="comment-author-link"><a href='http://www.diandian100.cn' rel='external nofollow ugc' class='url'>tony</a></span>发表在《<a href="http://it.newban.cn/archives/7#comment-2">pycharm激活码 更新时间2020年10月1日</a>》</li></ul></section> <!-- IT adsense 3/3 --> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-2626449904708114" data-ad-slot="4736415929" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <div class="widget widget-tags"> <h3 class="widgettitle">标签</h3> <div class="hot-tags"> <a href="http://it.newban.cn/tag/10131" rel="tag">clearfloatclearfloat</a> </div> </div> <section class="widget widget-hot"> <h3 class="widgettitle">热门</h3><ul class="post-list"><li class="post"> <div class="media-pic"><a href="http://it.newban.cn/archives/10"><img class="auto-cover" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" data-src="https://cdn.jsdelivr.net/gh/songjianzaina/SavePicGoPic/img/20200928120429.png" alt=""></a></div> <div class="media-body"> <a class="title" href="http://it.newban.cn/archives/10">Idea 激活码 更新时间2020年10月1日</a> <p class="post-metas"><svg class="wb-icon wbsico-download"><use xlink:href="#wbsico-download"></use></svg><em class="meta-dl">1520</em></p> </div> </li><li class="post"> <div class="media-pic"><a href="http://it.newban.cn/archives/24"><img class="auto-cover" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" data-src="https://cdn.jsdelivr.net/gh/songjianzaina/SavePicGoPic/img/u=922994232,1212480397&fm=26&gp=0.jpg" alt=""></a></div> <div class="media-body"> <a class="title" href="http://it.newban.cn/archives/24">jdk-8u251-macosx-x64 安装包下载</a> <p class="post-metas"><svg class="wb-icon wbsico-download"><use xlink:href="#wbsico-download"></use></svg><em class="meta-dl">617</em></p> </div> </li><li class="post"> <div class="media-pic"><a href="http://it.newban.cn/archives/2536"><img src="http://it.newban.cn/wp-content/themes/inpandora/images/wbolt_def_cover.png" alt=""></a></div> <div class="media-body"> <a class="title" href="http://it.newban.cn/archives/2536">android逆向反编译工具包下载</a> <p class="post-metas"><svg class="wb-icon wbsico-download"><use xlink:href="#wbsico-download"></use></svg><em class="meta-dl">602</em></p> </div> </li><li class="post"> <div class="media-pic"><a href="http://it.newban.cn/archives/7"><img class="auto-cover" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" data-src="https://cdn.jsdelivr.net/gh/songjianzaina/SavePicGoPic/img/20200927220448.png" alt=""></a></div> <div class="media-body"> <a class="title" href="http://it.newban.cn/archives/7">pycharm激活码 更新时间2020年10月1日</a> <p class="post-metas"><svg class="wb-icon wbsico-download"><use xlink:href="#wbsico-download"></use></svg><em class="meta-dl">258</em></p> </div> </li><li class="post"> <div class="media-pic"><a href="http://it.newban.cn/archives/81377"><img src="http://it.newban.cn/wp-content/themes/inpandora/images/wbolt_def_cover.png" alt=""></a></div> <div class="media-body"> <a class="title" href="http://it.newban.cn/archives/81377">Idea 激活码 active code 更新时间2021年9月3日</a> <p class="post-metas"><svg class="wb-icon wbsico-download"><use xlink:href="#wbsico-download"></use></svg><em class="meta-dl">202</em></p> </div> </li></ul></section> <section id="archives-2" class="spmg-bottom widget widget_archive"><h2 class="widgettitle">文章归档</h2> <ul> <li><a href='http://it.newban.cn/archives/date/2021/12'>2021年12月</a></li> <li><a href='http://it.newban.cn/archives/date/2021/10'>2021年10月</a></li> <li><a href='http://it.newban.cn/archives/date/2021/09'>2021年9月</a></li> <li><a href='http://it.newban.cn/archives/date/2021/08'>2021年8月</a></li> <li><a href='http://it.newban.cn/archives/date/2021/01'>2021年1月</a></li> <li><a href='http://it.newban.cn/archives/date/2020/12'>2020年12月</a></li> <li><a href='http://it.newban.cn/archives/date/2020/11'>2020年11月</a></li> <li><a href='http://it.newban.cn/archives/date/2020/10'>2020年10月</a></li> <li><a href='http://it.newban.cn/archives/date/2020/09'>2020年9月</a></li> </ul> </section><section id="categories-2" class="spmg-bottom widget widget_categories"><h2 class="widgettitle">分类目录</h2> <ul> <li class="cat-item cat-item-15"><a href="http://it.newban.cn/catchdata">catchdata</a> </li> <li class="cat-item cat-item-8"><a href="http://it.newban.cn/elasticsearch">elasticsearch</a> </li> <li class="cat-item cat-item-10"><a href="http://it.newban.cn/git">git</a> </li> <li class="cat-item cat-item-9"><a href="http://it.newban.cn/idea">idea</a> </li> <li class="cat-item cat-item-5"><a href="http://it.newban.cn/ideacode">ideacode</a> </li> <li class="cat-item cat-item-252"><a href="http://it.newban.cn/ideaseo">idea激活码</a> </li> <li class="cat-item cat-item-253"><a href="http://it.newban.cn/ideacodeseo">idea激活码2020最新</a> </li> <li class="cat-item cat-item-17"><a href="http://it.newban.cn/itarticle">itarticle</a> </li> <li class="cat-item cat-item-2"><a href="http://it.newban.cn/jdk">jdk</a> </li> <li class="cat-item cat-item-7"><a href="http://it.newban.cn/maven">maven</a> </li> <li class="cat-item cat-item-4"><a href="http://it.newban.cn/mysql">mysql</a> </li> <li class="cat-item cat-item-12"><a href="http://it.newban.cn/pip">pip</a> </li> <li class="cat-item cat-item-16"><a href="http://it.newban.cn/proxytools">proxytools</a> </li> <li class="cat-item cat-item-6"><a href="http://it.newban.cn/pycharmcode">pycharmcode</a> </li> <li class="cat-item cat-item-21"><a href="http://it.newban.cn/pycharmcodeseo">pycharm激活码</a> </li> <li class="cat-item cat-item-22"><a href="http://it.newban.cn/pycharmcodeseoe">pycharm激活码2020最新</a> </li> <li class="cat-item cat-item-13"><a href="http://it.newban.cn/python">python</a> </li> <li class="cat-item cat-item-3"><a href="http://it.newban.cn/redis">redis</a> </li> <li class="cat-item cat-item-14"><a href="http://it.newban.cn/sqltools">sqltools</a> </li> <li class="cat-item cat-item-1"><a href="http://it.newban.cn/uncategorized">Uncategorized</a> </li> <li class="cat-item cat-item-1326"><a href="http://it.newban.cn/fby">反编译工具</a> </li> <li class="cat-item cat-item-41130"><a href="http://it.newban.cn/fanq">梯子工具下载</a> </li> </ul> </section><section id="meta-2" class="spmg-bottom widget widget_meta"><h2 class="widgettitle">功能</h2> <ul> <li><a href="http://it.newban.cn/wp-login.php">登录</a></li> <li><a href="http://it.newban.cn/feed">条目feed</a></li> <li><a href="http://it.newban.cn/comments/feed">评论feed</a></li> <li><a href="https://cn.wordpress.org/">WordPress.org</a></li> </ul> </section> </div> </div> </div> </div> </div> <footer class="footer"> <nav class="nav-footer"> <ul id="J_footerNav" class="nav-ft"><li><a href="http://it.newban.cn/jdk">JDK下载</a></li> <li><a href="http://it.newban.cn/mysql">MySql下载</a></li> <li><a href="http://it.newban.cn/redis">Redis下载</a></li> <li><a href="http://it.newban.cn/idea">Idea下载</a></li> <li><a href="http://it.newban.cn/python">Python下载</a></li> <li><a href="http://it.newban.cn/ideacode">Idea激活码</a></li> <li><a href="http://it.newban.cn/git">Git下载</a></li> <li><a href="http://it.newban.cn/maven">Maven下载</a></li> <li><a href="http://it.newban.cn/elasticsearch">ElasticSearch下载</a></li> <li><a href="http://it.newban.cn/pip">Pip下载</a></li> <li><a href="http://it.newban.cn/sqltools">数据库工具</a></li> <li><a href="http://it.newban.cn/proxytools">免费代理工具</a></li> <li><a href="http://it.newban.cn/pycharmcode">Pycharm激活码</a></li> <li><a href="http://it.newban.cn/itarticle">技术文章</a></li> <li><a href="http://it.newban.cn/fby">反编译工具</a></li> <li><a href="http://it.newban.cn/fanq">梯子工具下载</a></li> </ul> </nav> <div class="copyright"> <span class="ib">Copyright © 2024 <a href="http://it.newban.cn/" rel="home">IT汇</a></span> <span class="ib sppd-h">All Rights Reserved</span> </div> <span class="ib pwb wk" data-theme-code="inpandora">Design by <a href="https://www.wbolt.com?ref=inpandora" target="_blank">闪电博</a></span> </div> </footer> <link rel='stylesheet' id='wbs-dwqr-css-css' href='http://it.newban.cn/wp-content/plugins/donate-with-qrcode/assets/wbp_donate.css?ver=1.4.0' type='text/css' media='all' /> <script type='text/javascript' src='http://it.newban.cn/wp-content/themes/inpandora/js/base.js?ver=202009' id='wbolt-base-js'></script> <script type='text/javascript' src='http://it.newban.cn/wp-includes/js/wp-embed.min.js?ver=5.5.6' id='wp-embed-js'></script> <script type='text/javascript' src='http://it.newban.cn/wp-content/plugins/donate-with-qrcode/assets/qrious.min.js?ver=1.4.0' id='qrious-js-js'></script> <script type='text/javascript' id='wbs-front-dwqr-js-before'> var dwqr_opt="1.4.0|http%3A%2F%2Fit.newban.cn%2Fwp-content%2Fplugins%2Fdonate-with-qrcode%2F|0|http%3A%2F%2Fit.newban.cn%2Fwp-admin%2Fadmin-ajax.php|15042"; var poster_theme=0, poster_ratio="3:2";var wb_dwqr_donate_html='<div class="tab-navs"></div><div class="tab-conts"></div>';var wb_dwqr_share_html='<div class="wb-share-list" data-cover="https://www.dazhuanlan.com/webchat.jpg"><a class="share-logo icon-weixin" data-cmd="weixin" title="分享到微信" rel="nofollow"><svg class="wb-icon wbsico-dwqr-weixin"><use xlink:href="#wbsico-dwqr-weixin"></use></svg></a><a class="share-logo icon-weibo" data-cmd="weibo" title="分享到微博" rel="nofollow"><svg class="wb-icon wbsico-dwqr-weibo"><use xlink:href="#wbsico-dwqr-weibo"></use></svg></a><a class="share-logo icon-qzone" data-cmd="qzone" title="分享到QQ空间" rel="nofollow"><svg class="wb-icon wbsico-dwqr-qzone"><use xlink:href="#wbsico-dwqr-qzone"></use></svg></a><a class="share-logo icon-qq" data-cmd="qq" title="分享到QQ" rel="nofollow"><svg class="wb-icon wbsico-dwqr-qq"><use xlink:href="#wbsico-dwqr-qq"></use></svg></a>'; </script> <script type='text/javascript' src='http://it.newban.cn/wp-content/plugins/donate-with-qrcode/assets/wbp_front.js?ver=1.4.0' id='wbs-front-dwqr-js'></script> <script type='text/javascript' src='http://it.newban.cn/wp-content/plugins/baidu-submit-link/assets/baidu_push.js' id='wb-baidu-push-js'></script> <a class="bktop" id="J_backTop" href="javascript:;" rel="nofollow" title="Back to top"><svg xmlns="http://www.w3.org/2000/svg" width="23" height="12"><path fill-rule="evenodd" d="M21.58 12L11.5 2.33 1.42 12 0 10.63 10.79.28c.4-.37 1.03-.37 1.42 0L23 10.63 21.58 12z"/></svg></a> </body> </html>