• <option id="ms4mi"><object id="ms4mi"></object></option>
    <fieldset id="ms4mi"><acronym id="ms4mi"></acronym></fieldset>
  • <td id="ms4mi"><dd id="ms4mi"></dd></td><small id="ms4mi"><source id="ms4mi"></source></small>
  • <\/pre>
            
    <\/pre>
                
    <\/div><\/pre>
                
    <\/div><\/pre>
                
    <\/div><\/pre>
                
    <\/div><\/pre>
            <\/div><\/pre>     
        <\/body><\/pre>     
    <\/html><\/pre>    <\/p>   <\/p>   

    截圖如是:<\/p>

    <\/p>

    第一個(gè)

    :<\/p>

    <\/p>

    第二個(gè)

    :<\/p>

    <\/p>

    第一個(gè)

    去掉'float:left':<\/p>

    <\/p>

    我們對(duì)比這幾幅截圖,可以得知以下幾點(diǎn):<\/p>

    1. float具有“包裹性”。(所謂包裹性就是普通的div如果沒有設(shè)置寬度,它會(huì)撐滿整個(gè)屏幕,而如果給div增加float:left之后,它會(huì)把內(nèi)容緊緊包裹起來。)【見圖(第一個(gè)
      )與圖(第一個(gè)
      去掉'float:left')的對(duì)比】<\/li>
    2. float具有“破壞性”。(所謂破壞性就是設(shè)置了float屬性的元素會(huì)脫離文檔流。)【見圖(第一個(gè)
      )與圖(第二個(gè)
      )】<\/li> <\/ol>

      其實(shí),如是解析仍感覺對(duì)float的“破壞性”描述的不太明白,好吧,再來個(gè)例子??纯磃loat的本職工作。<\/p>

      示例2:(我生來是做文字環(huán)繞效果的!)<\/h4>

       <\/pre>     
      <\/pre>     
          <\/pre>     
              <\/pre>     
              Demo<\/title><\/pre>     <pre class='brush:php;toolbar:false;'>    <\/head><\/pre>     <pre class='brush:php;toolbar:false;'>    <body>
      <h1><a href="http://www.miracleart.cn/">国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂</a></h1><\/pre>     <pre class='brush:php;toolbar:false;'>        <div><\/pre>     <pre class='brush:php;toolbar:false;'>            <img src=\"image\/1.jpg\" style='float:left'><\/pre>     <pre class='brush:php;toolbar:false;'>            哇咔咔,我生來是做文字文字環(huán)繞效果的!<\/pre>     <pre class='brush:php;toolbar:false;'>        <\/div><\/pre>     <pre class='brush:php;toolbar:false;'>    <\/body><\/pre>     <pre class='brush:php;toolbar:false;'><\/html><\/pre>    <\/p>      <p>去掉'float:left'的<img>元素:<\/p>   <p><\/p>   <p>帶有'float:left'的<img>元素:<\/p>   <p><\/p>   <p><img>元素去掉'float:left'時(shí)的<div>元素:<\/p>   <p><\/p>   <p><img>元素帶有'float:left'時(shí)的<div>元素:<\/p>   <p><\/p>   <p>其實(shí) ,我一直想強(qiáng)調(diào),但一直沒能說清楚的是:<\/p>   <p><\/p>    <p class=\"sycode\"><\/p>  <p class=\"sycode\"><\/p>  <p class=\"sycode\">   <\/p>\n<p class=\"sycode\"><\/p>   <p class=\"sycode\"><\/p>   <p class=\"sycode\">   <\/p>   <p class=\"sycode\"><\/p>   <p class=\"sycode\"><\/p>   "}	</script>
      	
      <meta http-equiv="Cache-Control" content="no-transform" />
      <meta http-equiv="Cache-Control" content="no-siteapp" />
      <script>var V_PATH="/";window.onerror=function(){ return true; };</script>
      </head>
      
      <body data-commit-time="2023-12-28T14:50:12+08:00" class="editor_body body2_2">
      	<link rel="stylesheet" type="text/css" href="/static/csshw/stylehw.css">
      <header>
          <div   id="377j5v51b"   class="head">
              <div   id="377j5v51b"   class="haed_left">
                  <div   id="377j5v51b"   class="haed_logo">
                      <a href="http://www.miracleart.cn/" title="" class="haed_logo_a">
                          <img src="/static/imghw/logo.png" alt="" class="haed_logoimg">
                      </a>
                  </div>
                  <div   id="377j5v51b"   class="head_nav">
                      <div   id="377j5v51b"   class="head_navs">
                          <a href="javascript:;" title="Community" class="head_nava head_nava-template1">Community</a>
                          <div   class="377j5v51b"   id="dropdown-template1" style="display: none;">
                              <div   id="377j5v51b"   class="languagechoose">
                                  <a href="http://www.miracleart.cn/article.html" title="Articles" class="languagechoosea on">Articles</a>
                                  <a href="http://www.miracleart.cn/faq/zt" title="Topics" class="languagechoosea">Topics</a>
                                  <a href="http://www.miracleart.cn/wenda.html" title="Q&A" class="languagechoosea">Q&A</a>
                              </div>
                          </div>
                      </div>
      
                      <div   id="377j5v51b"   class="head_navs">
                          <a href="javascript:;" title="Learn" class="head_nava head_nava-template1_1">Learn</a>
                          <div   class="377j5v51b"   id="dropdown-template1_1" style="display: none;">
                              <div   id="377j5v51b"   class="languagechoose">
                                  <a href="http://www.miracleart.cn/course.html" title="Course" class="languagechoosea on">Course</a>
                                  <a href="http://www.miracleart.cn/dic/" title="Programming Dictionary" class="languagechoosea">Programming Dictionary</a>
                              </div>
                          </div>
                      </div>
      
                      <div   id="377j5v51b"   class="head_navs">
                          <a href="javascript:;" title="Tools Library" class="head_nava head_nava-template1_2">Tools Library</a>
                          <div   class="377j5v51b"   id="dropdown-template1_2" style="display: none;">
                              <div   id="377j5v51b"   class="languagechoose">
                                  <a href="http://www.miracleart.cn/toolset/development-tools" title="Development tools" class="languagechoosea on">Development tools</a>
                                  <a href="http://www.miracleart.cn/toolset/website-source-code" title="Website Source Code" class="languagechoosea">Website Source Code</a>
                                  <a href="http://www.miracleart.cn/toolset/php-libraries" title="PHP Libraries" class="languagechoosea">PHP Libraries</a>
                                  <a href="http://www.miracleart.cn/toolset/js-special-effects" title="JS special effects" class="languagechoosea on">JS special effects</a>
                                  <a href="http://www.miracleart.cn/toolset/website-materials" title="Website Materials" class="languagechoosea on">Website Materials</a>
                                  <a href="http://www.miracleart.cn/toolset/extension-plug-ins" title="Extension plug-ins" class="languagechoosea on">Extension plug-ins</a>
                              </div>
                          </div>
                      </div>
      
                      <div   id="377j5v51b"   class="head_navs">
                          <a href="http://www.miracleart.cn/ai" title="AI Tools" class="head_nava head_nava-template1_3">AI Tools</a>
                      </div>
      
                      <div   id="377j5v51b"   class="head_navs">
                          <a href="javascript:;" title="Leisure" class="head_nava head_nava-template1_3">Leisure</a>
                          <div   class="377j5v51b"   id="dropdown-template1_3" style="display: none;">
                              <div   id="377j5v51b"   class="languagechoose">
                                  <a href="http://www.miracleart.cn/game" title="Game Download" class="languagechoosea on">Game Download</a>
                                  <a href="http://www.miracleart.cn/mobile-game-tutorial/" title="Game Tutorials" class="languagechoosea">Game Tutorials</a>
      
                              </div>
                          </div>
                      </div>
                  </div>
              </div>
                          <div   id="377j5v51b"   class="head_search">
                      <input id="key_words"  onkeydown="if (event.keyCode == 13) searchs('en')" class="search-input" type="text" autocomplete="off" name="keywords" required="required" placeholder="Block,address,transaction,news" value="">
                      <a href="javascript:;" title="search"  onclick="searchs('en')"><img src="/static/imghw/find.png" alt="search"></a>
                  </div>
                      <div   id="377j5v51b"   class="head_right">
                  <div   id="377j5v51b"   class="haed_language">
                      <a href="javascript:;" class="layui-btn haed_language_btn">English<i class="layui-icon layui-icon-triangle-d"></i></a>
                      <div   class="377j5v51b"   id="dropdown-template" style="display: none;">
                          <div   id="377j5v51b"   class="languagechoose">
                                                      <a href="javascript:setlang('zh-cn');" title="簡(jiǎn)體中文" class="languagechoosea">簡(jiǎn)體中文</a>
                                                      <a href="javascript:;" title="English" class="languagechoosea">English</a>
                                                      <a href="javascript:setlang('zh-tw');" title="繁體中文" class="languagechoosea">繁體中文</a>
                                                      <a href="javascript:setlang('ja');" title="日本語" class="languagechoosea">日本語</a>
                                                      <a href="javascript:setlang('ko');" title="???" class="languagechoosea">???</a>
                                                      <a href="javascript:setlang('ms');" title="Melayu" class="languagechoosea">Melayu</a>
                                                      <a href="javascript:setlang('fr');" title="Fran?ais" class="languagechoosea">Fran?ais</a>
                                                      <a href="javascript:setlang('de');" title="Deutsch" class="languagechoosea">Deutsch</a>
                                                  </div>
                      </div>
                  </div>
                  <span id="377j5v51b"    class="head_right_line"></span>
                                  <div style="display: block;" id="login" class="haed_login ">
                          <a href="javascript:;"  title="Login" class="haed_logina ">Login</a>
                      </div>
                      <div style="display: block;" id="reg" class="head_signup login">
                          <a href="javascript:;"  title="singup" class="head_signupa">singup</a>
                      </div>
                  
              </div>
          </div>
      </header>
      
      	
      	<main>
      		<div   id="377j5v51b"   class="Article_Details_main">
      			<div   id="377j5v51b"   class="Article_Details_main1">
      							<div   id="377j5v51b"   class="Article_Details_main1L">
      					<div   id="377j5v51b"   class="Article_Details_main1Lmain" id="Article_Details_main1Lmain">
      						<div   id="377j5v51b"   class="Article_Details_main1L1">Table of Contents</div>
      						<div   id="377j5v51b"   class="Article_Details_main1L2" id="Article_Details_main1L2">
      							<!-- 左側(cè)懸浮,文章定位標(biāo)題1 id="Article_Details_main1L2s_1"-->
      															<div   id="377j5v51b"   class="Article_Details_main1L2s ">
      									<a href="#Positioning" title="1. Positioning: " >1. Positioning: </a>
      								</div>
      																<div   id="377j5v51b"   class="Article_Details_main1L2s ">
      									<a href="#Understanding-of-positioning" title="1. Understanding of positioning " >1. Understanding of positioning </a>
      								</div>
      																<div   id="377j5v51b"   class="Article_Details_main1L2s ">
      									<a href="#Relative-positioning" title=" (1) Relative positioning " > (1) Relative positioning </a>
      								</div>
      																<div   id="377j5v51b"   class="Article_Details_main1L2s ">
      									<a href="#Absolute-positioning" title=" (2) Absolute positioning " > (2) Absolute positioning </a>
      								</div>
      																<div   id="377j5v51b"   class="Article_Details_main1L2s ">
      									<a href="#CSS-positioning-properties" title="2. CSS positioning properties " >2. CSS positioning properties </a>
      								</div>
      																<div   id="377j5v51b"   class="Article_Details_main1L2s ">
      									<a href="#position" title=" (1) position " > (1) position </a>
      								</div>
      																<div   id="377j5v51b"   class="Article_Details_main1L2s ">
      									<a href="#top-right-bottom-left" title=" (2) top, right, bottom, left" > (2) top, right, bottom, left</a>
      								</div>
      																<div   id="377j5v51b"   class="Article_Details_main1L2s ">
      									<a href="#overflow" title="(3)overflow" >(3)overflow</a>
      								</div>
      																<div   id="377j5v51b"   class="Article_Details_main1L2s ">
      									<a href="#clip" title="(4)clip" >(4)clip</a>
      								</div>
      																<div   id="377j5v51b"   class="Article_Details_main1L2s ">
      									<a href="#vertical-align" title="(5)vertical-align" >(5)vertical-align</a>
      								</div>
      																<div   id="377j5v51b"   class="Article_Details_main1L2s ">
      									<a href="#z-index-設(shè)置元素的堆疊順序" title="(6)z-index:設(shè)置元素的堆疊順序。" >(6)z-index:設(shè)置元素的堆疊順序。</a>
      								</div>
      																<div   id="377j5v51b"   class="Article_Details_main1L2s ">
      									<a href="#二-浮動(dòng)" title="二、浮動(dòng)" >二、浮動(dòng)</a>
      								</div>
      																<div   id="377j5v51b"   class="Article_Details_main1L2s ">
      									<a href="#浮動(dòng)的理解" title="1、浮動(dòng)的理解" >1、浮動(dòng)的理解</a>
      								</div>
      																<div   id="377j5v51b"   class="Article_Details_main1L2s ">
      									<a href="#CSS-浮動(dòng)屬性" title="2、CSS 浮動(dòng)屬性" >2、CSS 浮動(dòng)屬性</a>
      								</div>
      																<div   id="377j5v51b"   class="Article_Details_main1L2s ">
      									<a href="#來個(gè)實(shí)驗(yàn)吧" title="3、來個(gè)實(shí)驗(yàn)吧!" >3、來個(gè)實(shí)驗(yàn)吧!</a>
      								</div>
      																<div   id="377j5v51b"   class="Article_Details_main1L2s ">
      									<a href="#示例-認(rèn)識(shí)float的兩種特性" title="示例1:(認(rèn)識(shí)float的兩種特性)" >示例1:(認(rèn)識(shí)float的兩種特性)</a>
      								</div>
      																<div   id="377j5v51b"   class="Article_Details_main1L2s ">
      									<a href="#示例-我生來是做文字環(huán)繞效果的" title="示例2:(我生來是做文字環(huán)繞效果的?。? >示例2:(我生來是做文字環(huán)繞效果的?。?/a>
      								</div>
      														</div>
      					</div>
      				</div>
      							<div   id="377j5v51b"   class="Article_Details_main1M">
      					<div   id="377j5v51b"   class="phpgenera_Details_mainL1">
      						<a href="http://www.miracleart.cn/" title="Home"
      							class="phpgenera_Details_mainL1a">Home</a>
      						<img src="/static/imghw/top_right.png" alt="" />
      												<a href="http://www.miracleart.cn/web-designer.html"
      							class="phpgenera_Details_mainL1a">Web Front-end</a>
      						<img src="/static/imghw/top_right.png" alt="" />
      												<a href="http://www.miracleart.cn/div-tutorial.html"
      							class="phpgenera_Details_mainL1a">HTML Tutorial</a>
      						<img src="/static/imghw/top_right.png" alt="" />
      						<span>Back-end coders talk about front-end (CSS) Lesson 7: Positioning and Floating_html/css_WEB-ITnose</span>
      					</div>
      					
      					<div   id="377j5v51b"   class="Articlelist_txts">
      						<div   id="377j5v51b"   class="Articlelist_txts_info">
      							<h1 class="Articlelist_txts_title">Back-end coders talk about front-end (CSS) Lesson 7: Positioning and Floating_html/css_WEB-ITnose</h1>
      							<div   id="377j5v51b"   class="Articlelist_txts_info_head">
      								<div   id="377j5v51b"   class="author_info">
      									<a href="http://www.miracleart.cn/member/887227.html"  class="author_avatar">
      									<img class="lazy"  data-src="https://img.php.cn/upload/avatar/000/887/227/63bb7851c9547215.jpg" src="/static/imghw/default1.png" alt="WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB">
      									</a>
      									<div   id="377j5v51b"   class="author_detail">
      																			<a href="http://www.miracleart.cn/member/887227.html" class="author_name">WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB</a>
                                      										</div>
      								</div>
                      			</div>
      							<span id="377j5v51b"    class="Articlelist_txts_time">Jun 24, 2016 am	 11:47 AM</span>
      														
      						</div>
      					</div>
      					<hr />
      					<div   id="377j5v51b"   class="article_main php-article">
      						<div   id="377j5v51b"   class="article-list-left detail-content-wrap content">
      						<ins class="adsbygoogle"
      							style="display:block; text-align:center;"
      							data-ad-layout="in-article"
      							data-ad-format="fluid"
      							data-ad-client="ca-pub-5902227090019525"
      							data-ad-slot="3461856641">
      						</ins>
      						
      
      					<p class="sycode"> </p>
      <p class="sycode"> </p>
      <h2 id="Positioning">1. Positioning: </h2> <h3 id="Understanding-of-positioning">1. Understanding of positioning </h3> <h4 id="Relative-positioning"> (1) Relative positioning </h4> <p>Relative positioning is a very easy concept to master . If an element is positioned relatively, it will appear where it is. You can then move the element "relative to" its origin by setting a vertical or horizontal position. </p> <p>If you set top to 20px, the box will be 20 pixels below the top of its original position. If left is set to 30 pixels, then 30 pixels of space will be created to the left of the element, which will move the element to the right. </p> <br> <p> </p> <p class="sycode"> </p>
      <p class="sycode"> <pre class='brush:php;toolbar:false;'>#box_relative {</pre> <pre class='brush:php;toolbar:false;'>  position: relative;</pre> <pre class='brush:php;toolbar:false;'>  left: 30px;</pre> <pre class='brush:php;toolbar:false;'>  top: 20px;</pre> <pre class='brush:php;toolbar:false;'>}</pre> </p> </p> <p></p> <p>As shown below Shown: </p> <p></p> <p>Note that when using relative positioning, the element still occupies the original space regardless of whether it is moved or not. Therefore, moving an element causes it to cover other boxes. </p> <h4 id="Absolute-positioning"> (2) Absolute positioning </h4> <p>Absolute positioning makes the position of the element independent of the document flow, so it does not occupy space. This is different from relative positioning, which is actually considered part of the normal flow positioning model because the element's position is relative to its position in the normal flow. <br />Other elements in the normal flow are laid out as if the absolutely positioned element did not exist: <br /> </p> <p class="sycode"> <p class="sycode"> <pre class='brush:php;toolbar:false;'>#box_relative {</pre> <pre class='brush:php;toolbar:false;'>  position: absolute;</pre> <pre class='brush:php;toolbar:false;'>  left: 30px;</pre> <pre class='brush:php;toolbar:false;'>  top: 20px;</pre> <pre class='brush:php;toolbar:false;'>}</pre> </p> </p>As shown below: <p></p> <p></p> <p>The position of an absolutely positioned element is relative to the nearest positioned ancestor element. If the element has no positioned ancestor element, then its The position is relative to the original containing block. <br />The main issue with positioning is to remember what each positioning means. So, now let's review what we learned: relative positioning is "relative to" the element's initial position in the document, while absolute positioning is "relative to" the nearest positioned ancestor element, if no positioned ancestor exists element, then "relative to" the original containing block. <br />Note: Depending on the user agent, the initial containing block may be a canvas or HTML element. <br />Tip: Because absolutely positioned boxes are independent of document flow, they can cover other elements on the page. The stacking order of these boxes can be controlled by setting the z-index property. </p> <h3 id="CSS-positioning-properties">2. CSS positioning properties </h3> <p>CSS positioning properties allow you to position elements. </p> <h4 id="position"> (1) position </h4> <p> Place the element in a static, relative, absolute, or fixed position. </p> <p>Attribute value: </p> <li>absolute: Generates an absolutely positioned element, positioned relative to the first parent element other than static positioning. The position of the element is specified via the "left", "top", "right" and "bottom" attributes. </li> <li>fixed: Generates absolutely positioned elements, positioned relative to the browser window. The position of the element is specified via the "left", "top", "right" and "bottom" attributes. </li> <li>relative: Generates a relatively positioned element, positioned relative to its normal position. Therefore, "left:20" adds 20 pixels to the element's LEFT position. </li> <li>static:Default value. Without positioning, the element appears in normal flow (ignoring top, bottom, left, right or z-index declarations). </li> <li>inherit: Specifies that the value of the position attribute should be inherited from the parent element. </li> <h4 id="top-right-bottom-left"> (2) top, right, bottom, left</h4> <table>     <tr>     <td>屬性</td>     <td>描述</td>    </tr>    <tr>     <td>top</td>     <td>定義了一個(gè)定位元素的上外邊距邊界與其包含塊上邊界之間的偏移。</td>    </tr>    <tr>     <td>right</td>     <td>定義了定位元素右外邊距邊界與其包含塊右邊界之間的偏移。</td>    </tr>    <tr>     <td>bottom</td>     <td>定義了定位元素下外邊距邊界與其包含塊下邊界之間的偏移。</td>    </tr>    <tr>     <td>left</td>     <td>定義了定位元素左外邊距邊界與其包含塊左邊界之間的偏移。</td>    </tr>    </table>   <p>屬性值:</p>   <li>auto:默認(rèn)值。通過瀏覽器計(jì)算上邊緣的位置。</li>   <li>%:設(shè)置以包含元素的百分比計(jì)的上邊位置??墒褂秘?fù)值。</li>   <li>length:使用 px、cm 等單位設(shè)置元素的上邊位置。可使用負(fù)值。</li>   <li>inherit:規(guī)定應(yīng)該從父元素繼承 top 屬性的值。</li>   <h4 id="overflow">(3)overflow</h4>   <p>設(shè)置當(dāng)元素的內(nèi)容溢出其區(qū)域時(shí)發(fā)生的事情。</p>   <p>屬性值:</p>   <li>visible:默認(rèn)值。內(nèi)容不會(huì)被修剪,會(huì)呈現(xiàn)在元素框之外。</li>   <li>hidden:內(nèi)容會(huì)被修剪,并且其余內(nèi)容是不可見的。</li>   <li>scroll:內(nèi)容會(huì)被修剪,但是瀏覽器會(huì)顯示滾動(dòng)條以便查看其余的內(nèi)容。</li>   <li>auto:如果內(nèi)容被修剪,則瀏覽器會(huì)顯示滾動(dòng)條以便查看其余的內(nèi)容。</li>   <li>inherit:規(guī)定應(yīng)該從父元素繼承 overflow 屬性的值。</li>   <h4 id="clip">(4)clip</h4>   <p>設(shè)置元素的形狀。元素被剪入這個(gè)形狀之中,然后顯示出來。</p>   <p>屬性值:</p>   <li>shape:設(shè)置元素的形狀。唯一合法的形狀值是:rect (top, right, bottom, left)。</li>   <li>auto:默認(rèn)值。不應(yīng)用任何剪裁。</li>   <li>inherit:規(guī)定應(yīng)該從父元素繼承 clip 屬性的值。</li>   <h4 id="vertical-align">(5)vertical-align</h4>   <p>設(shè)置元素的垂直對(duì)齊方式。 </p>   <p>屬性值: </p>   <li>baseline:默認(rèn)。元素放置在父元素的基線上。</li>   <li>sub:垂直對(duì)齊文本的下標(biāo)。</li>   <li>super:垂直對(duì)齊文本的上標(biāo)</li>   <li>top:把元素的頂端與行中最高元素的頂端對(duì)齊</li>   <li>text-top:把元素的頂端與父元素字體的頂端對(duì)齊</li>   <li>middle:把此元素放置在父元素的中部。</li>   <li>bottom:把元素的頂端與行中最低的元素的頂端對(duì)齊。</li>   <li>text-bottom:把元素的底端與父元素字體的底端對(duì)齊。</li>   <li>length    </li>   <li>%:使用 "line-height" 屬性的百分比值來排列此元素。允許使用負(fù)值。</li>   <li>inherit:規(guī)定應(yīng)該從父元素繼承 vertical-align 屬性的值。</li>   <h4 id="z-index-設(shè)置元素的堆疊順序">(6)z-index:設(shè)置元素的堆疊順序。</h4>   <p>屬性值:</p>   <li>auto:默認(rèn)。堆疊順序與父元素相等。</li>   <li>number:設(shè)置元素的堆疊順序。</li>   <li>inherit:規(guī)定應(yīng)該從父元素繼承 z-index 屬性的值。</li>   <h2 id="二-浮動(dòng)">二、浮動(dòng)</h2>   <h3 id="浮動(dòng)的理解">1、浮動(dòng)的理解</h3>   <p>浮動(dòng)的框可以向左或向右移動(dòng),直到它的外邊緣碰到包含框或另一個(gè)浮動(dòng)框的邊框?yàn)橹埂?/p>   <p>由于浮動(dòng)框不在文檔的普通流中,所以文檔的普通流中的塊框表現(xiàn)得就像浮動(dòng)框不存在一樣。</p>   <p>請(qǐng)看下圖,當(dāng)把框 1 向右浮動(dòng)時(shí),它脫離文檔流并且向右移動(dòng),直到它的右邊緣碰到包含框的右邊緣:</p>   <p></p>   <p>再請(qǐng)看下圖,當(dāng)框 1 向左浮動(dòng)時(shí),它脫離文檔流并且向左移動(dòng),直到它的左邊緣碰到包含框的左邊緣。因?yàn)樗辉偬幱谖臋n流中,所以它不占據(jù)空間,實(shí)際上覆蓋住了框 2,使框 2 從視圖中消失。</p>   <p>如果把所有三個(gè)框都向左移動(dòng),那么框 1 向左浮動(dòng)直到碰到包含框,另外兩個(gè)框向左浮動(dòng)直到碰到前一個(gè)浮動(dòng)框。</p>   <p></p>   <p>如下圖所示,如果包含框太窄,無法容納水平排列的三個(gè)浮動(dòng)元素,那么其它浮動(dòng)塊向下移動(dòng),直到有足夠的空間。如果浮動(dòng)元素的高度不同,那么當(dāng)它們向下移動(dòng)時(shí)可能被其它浮動(dòng)元素“卡住”:</p>   <p></p>   <h3 id="CSS-浮動(dòng)屬性">2、CSS 浮動(dòng)屬性</h3>   <p>float</p>   <p>屬性值:</p>   <li>left:元素向左浮動(dòng)。</li>   <li>right:元素向右浮動(dòng)。</li>   <li>none:默認(rèn)值。元素不浮動(dòng),并會(huì)顯示在其在文本中出現(xiàn)的位置。</li>   <li>inherit:規(guī)定應(yīng)該從父元素繼承 float 屬性的值。</li>   <p>實(shí)例(把圖像向右浮動(dòng)):<br /> </p>   <p class="sycode">    <p class="sycode">     <pre class='brush:php;toolbar:false;'>img</pre>     <pre class='brush:php;toolbar:false;'>  {</pre>     <pre class='brush:php;toolbar:false;'>  float:right;</pre>     <pre class='brush:php;toolbar:false;'>  }</pre>    </p>   </p>   <p></p>   <h3 id="來個(gè)實(shí)驗(yàn)吧">3、來個(gè)實(shí)驗(yàn)吧!</h3>   <h4 id="示例-認(rèn)識(shí)float的兩種特性">示例1:(認(rèn)識(shí)float的兩種特性)</h4>   <p class="sycode">    <p class="sycode">     <pre class='brush:php;toolbar:false;'><!DOCTYPE html> </pre>     <pre class='brush:php;toolbar:false;'><html></pre>     <pre class='brush:php;toolbar:false;'>    <head></pre>     <pre class='brush:php;toolbar:false;'>        <title>Demo</title></pre>     <pre class='brush:php;toolbar:false;'>    </head></pre>     <pre class='brush:php;toolbar:false;'>    <body></pre>     <pre class='brush:php;toolbar:false;'>        <div></pre>     <pre class='brush:php;toolbar:false;'>            <div style='float:left'><img src="image/1.jpg" ></div></pre>     <pre class='brush:php;toolbar:false;'>            <div><img src="image/2.jpg" ></div></pre>     <pre class='brush:php;toolbar:false;'>            <div><img src="image/3.jpg" ></div></pre>     <pre class='brush:php;toolbar:false;'>            <div><img src="image/4.jpg" ></div></pre>     <pre class='brush:php;toolbar:false;'>        </div></pre>     <pre class='brush:php;toolbar:false;'>    </body></pre>     <pre class='brush:php;toolbar:false;'></html></pre>    </p>   </p>   <p>截圖如是:</p>   <p></p>   <p>第一個(gè)<div>:</p>   <p></p>   <p>第二個(gè)<div>:</p>   <p></p>   <p>第一個(gè)<div>去掉'float:left':</p>   <p></p>   <p>我們對(duì)比這幾幅截圖,可以得知以下幾點(diǎn):</p>   <ol>    <li>float具有“包裹性”。(所謂包裹性就是普通的div如果沒有設(shè)置寬度,它會(huì)撐滿整個(gè)屏幕,而如果給div增加float:left之后,它會(huì)把內(nèi)容緊緊包裹起來。)【見圖(第一個(gè)<div>)與圖(第一個(gè)<div>去掉'float:left')的對(duì)比】</li>    <li>float具有“破壞性”。(所謂破壞性就是設(shè)置了float屬性的元素會(huì)脫離文檔流。)【見圖(第一個(gè)<div>)與圖(第二個(gè)<div>)】</li>   </ol>   <p>其實(shí),如是解析仍感覺對(duì)float的“破壞性”描述的不太明白,好吧,再來個(gè)例子??纯磃loat的本職工作。</p>   <h4 id="示例-我生來是做文字環(huán)繞效果的">示例2:(我生來是做文字環(huán)繞效果的?。?/h4>   <p class="sycode">    <p class="sycode">     <pre class='brush:php;toolbar:false;'><!DOCTYPE html> </pre>     <pre class='brush:php;toolbar:false;'><html lang=“utf8”></pre>     <pre class='brush:php;toolbar:false;'>    <head></pre>     <pre class='brush:php;toolbar:false;'>        <meta charset="utf-8"></pre>     <pre class='brush:php;toolbar:false;'>        <title>Demo</title></pre>     <pre class='brush:php;toolbar:false;'>    </head></pre>     <pre class='brush:php;toolbar:false;'>    <body></pre>     <pre class='brush:php;toolbar:false;'>        <div></pre>     <pre class='brush:php;toolbar:false;'>            <img src="image/1.jpg" style='float:left'></pre>     <pre class='brush:php;toolbar:false;'>            哇咔咔,我生來是做文字文字環(huán)繞效果的!</pre>     <pre class='brush:php;toolbar:false;'>        </div></pre>     <pre class='brush:php;toolbar:false;'>    </body></pre>     <pre class='brush:php;toolbar:false;'></html></pre>    </p>      <p>去掉'float:left'的<img>元素:</p>   <p></p>   <p>帶有'float:left'的<img>元素:</p>   <p></p>   <p><img>元素去掉'float:left'時(shí)的<div>元素:</p>   <p></p>   <p><img>元素帶有'float:left'時(shí)的<div>元素:</p>   <p></p>   <p>其實(shí) ,我一直想強(qiáng)調(diào),但一直沒能說清楚的是:</p>   <p></p>    <p class="sycode"></p>  <p class="sycode"></p>  <p class="sycode">   </p>
      <p class="sycode"></p>   <p class="sycode"></p>   <p class="sycode">   </p>   <p class="sycode"></p>   <p class="sycode"></p>   
      
      
      						</div>
      					</div>
      					<div   id="377j5v51b"   class="wzconShengming_sp">
      						<div   id="377j5v51b"   class="bzsmdiv_sp">Statement of this Website</div>
      						<div>The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn</div>
      					</div>
      				</div>
      
      				<ins class="adsbygoogle"
           style="display:block"
           data-ad-format="autorelaxed"
           data-ad-client="ca-pub-5902227090019525"
           data-ad-slot="2507867629"></ins>
      
      
      
      				<div   id="377j5v51b"   class="AI_ToolDetails_main4sR">
      
      
      				<ins class="adsbygoogle"
              style="display:block"
              data-ad-client="ca-pub-5902227090019525"
              data-ad-slot="3653428331"
              data-ad-format="auto"
              data-full-width-responsive="true"></ins>
          
      
      
      					<!-- <div   id="377j5v51b"   class="phpgenera_Details_mainR4">
      						<div   id="377j5v51b"   class="phpmain1_4R_readrank">
      							<div   id="377j5v51b"   class="phpmain1_4R_readrank_top">
      								<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
      									onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
      									src="/static/imghw/hotarticle2.png" alt="" />
      								<h2>Hot Article</h2>
      							</div>
      							<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottom">
      															<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms">
      									<a href="http://www.miracleart.cn/faq/1796821119.html" title="Guide: Stellar Blade Save File Location/Save File Lost/Not Saving" class="phpgenera_Details_mainR4_bottom_title">Guide: Stellar Blade Save File Location/Save File Lost/Not Saving</a>
      									<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms_info">
      										<span>4 weeks ago</span>
      										<span>By DDD</span>
      									</div>
      								</div>
      															<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms">
      									<a href="http://www.miracleart.cn/faq/1796828723.html" title="Agnes Tachyon Build Guide | A Pretty Derby Musume" class="phpgenera_Details_mainR4_bottom_title">Agnes Tachyon Build Guide | A Pretty Derby Musume</a>
      									<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms_info">
      										<span>2 weeks ago</span>
      										<span>By Jack chen</span>
      									</div>
      								</div>
      															<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms">
      									<a href="http://www.miracleart.cn/faq/1796827210.html" title="Oguri Cap Build Guide | A Pretty Derby Musume" class="phpgenera_Details_mainR4_bottom_title">Oguri Cap Build Guide | A Pretty Derby Musume</a>
      									<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms_info">
      										<span>2 weeks ago</span>
      										<span>By Jack chen</span>
      									</div>
      								</div>
      															<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms">
      									<a href="http://www.miracleart.cn/faq/1796821436.html" title="Dune: Awakening - Advanced Planetologist Quest Walkthrough" class="phpgenera_Details_mainR4_bottom_title">Dune: Awakening - Advanced Planetologist Quest Walkthrough</a>
      									<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms_info">
      										<span>4 weeks ago</span>
      										<span>By Jack chen</span>
      									</div>
      								</div>
      															<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms">
      									<a href="http://www.miracleart.cn/faq/1796821278.html" title="Date Everything: Dirk And Harper Relationship Guide" class="phpgenera_Details_mainR4_bottom_title">Date Everything: Dirk And Harper Relationship Guide</a>
      									<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms_info">
      										<span>4 weeks ago</span>
      										<span>By Jack chen</span>
      									</div>
      								</div>
      														</div>
      							<div   id="377j5v51b"   class="phpgenera_Details_mainR3_more">
      								<a href="http://www.miracleart.cn/article.html">Show More</a>
      							</div>
      						</div>
      					</div> -->
      
      
      											<div   id="377j5v51b"   class="phpgenera_Details_mainR3">
      							<div   id="377j5v51b"   class="phpmain1_4R_readrank">
      								<div   id="377j5v51b"   class="phpmain1_4R_readrank_top">
      									<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
      										onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
      										src="/static/imghw/hottools2.png" alt="" />
      									<h2>Hot AI Tools</h2>
      								</div>
      								<div   id="377j5v51b"   class="phpgenera_Details_mainR3_bottom">
      																		<div   id="377j5v51b"   class="phpmain_tab2_mids_top">
      											<a href="http://www.miracleart.cn/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_top_img">
      												<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
      													onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
      													class="lazy"  data-src="https://img.php.cn/upload/ai_manual/001/246/273/173410641626608.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undress AI Tool" />
      											</a>
      											<div   id="377j5v51b"   class="phpmain_tab2_mids_info">
      												<a href="http://www.miracleart.cn/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_title">
      													<h3>Undress AI Tool</h3>
      												</a>
      												<p>Undress images for free</p>
      											</div>
      										</div>
      																		<div   id="377j5v51b"   class="phpmain_tab2_mids_top">
      											<a href="http://www.miracleart.cn/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_top_img">
      												<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
      													onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
      													class="lazy"  data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411540686492.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undresser.AI Undress" />
      											</a>
      											<div   id="377j5v51b"   class="phpmain_tab2_mids_info">
      												<a href="http://www.miracleart.cn/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_title">
      													<h3>Undresser.AI Undress</h3>
      												</a>
      												<p>AI-powered app for creating realistic nude photos</p>
      											</div>
      										</div>
      																		<div   id="377j5v51b"   class="phpmain_tab2_mids_top">
      											<a href="http://www.miracleart.cn/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_top_img">
      												<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
      													onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
      													class="lazy"  data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411552797167.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="AI Clothes Remover" />
      											</a>
      											<div   id="377j5v51b"   class="phpmain_tab2_mids_info">
      												<a href="http://www.miracleart.cn/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_title">
      													<h3>AI Clothes Remover</h3>
      												</a>
      												<p>Online AI tool for removing clothes from photos.</p>
      											</div>
      										</div>
      																		<div   id="377j5v51b"   class="phpmain_tab2_mids_top">
      											<a href="http://www.miracleart.cn/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_top_img">
      												<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
      													onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
      													class="lazy"  data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411529149311.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Clothoff.io" />
      											</a>
      											<div   id="377j5v51b"   class="phpmain_tab2_mids_info">
      												<a href="http://www.miracleart.cn/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_title">
      													<h3>Clothoff.io</h3>
      												</a>
      												<p>AI clothes remover</p>
      											</div>
      										</div>
      																		<div   id="377j5v51b"   class="phpmain_tab2_mids_top">
      											<a href="http://www.miracleart.cn/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_top_img">
      												<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
      													onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
      													class="lazy"  data-src="https://img.php.cn/upload/ai_manual/001/246/273/173414504068133.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Video Face Swap" />
      											</a>
      											<div   id="377j5v51b"   class="phpmain_tab2_mids_info">
      												<a href="http://www.miracleart.cn/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_title">
      													<h3>Video Face Swap</h3>
      												</a>
      												<p>Swap faces in any video effortlessly with our completely free AI face swap tool!</p>
      											</div>
      										</div>
      																</div>
      								<div   id="377j5v51b"   class="phpgenera_Details_mainR3_more">
      									<a href="http://www.miracleart.cn/ai">Show More</a>
      								</div>
      							</div>
      						</div>
      					
      
      
      					<div   id="377j5v51b"   class="phpgenera_Details_mainR4">
      						<div   id="377j5v51b"   class="phpmain1_4R_readrank">
      							<div   id="377j5v51b"   class="phpmain1_4R_readrank_top">
      								<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
      									onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
      									src="/static/imghw/hotarticle2.png" alt="" />
      								<h2>Hot Article</h2>
      							</div>
      							<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottom">
      															<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms">
      									<a href="http://www.miracleart.cn/faq/1796821119.html" title="Guide: Stellar Blade Save File Location/Save File Lost/Not Saving" class="phpgenera_Details_mainR4_bottom_title">Guide: Stellar Blade Save File Location/Save File Lost/Not Saving</a>
      									<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms_info">
      										<span>4 weeks ago</span>
      										<span>By DDD</span>
      									</div>
      								</div>
      															<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms">
      									<a href="http://www.miracleart.cn/faq/1796828723.html" title="Agnes Tachyon Build Guide | A Pretty Derby Musume" class="phpgenera_Details_mainR4_bottom_title">Agnes Tachyon Build Guide | A Pretty Derby Musume</a>
      									<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms_info">
      										<span>2 weeks ago</span>
      										<span>By Jack chen</span>
      									</div>
      								</div>
      															<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms">
      									<a href="http://www.miracleart.cn/faq/1796827210.html" title="Oguri Cap Build Guide | A Pretty Derby Musume" class="phpgenera_Details_mainR4_bottom_title">Oguri Cap Build Guide | A Pretty Derby Musume</a>
      									<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms_info">
      										<span>2 weeks ago</span>
      										<span>By Jack chen</span>
      									</div>
      								</div>
      															<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms">
      									<a href="http://www.miracleart.cn/faq/1796821436.html" title="Dune: Awakening - Advanced Planetologist Quest Walkthrough" class="phpgenera_Details_mainR4_bottom_title">Dune: Awakening - Advanced Planetologist Quest Walkthrough</a>
      									<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms_info">
      										<span>4 weeks ago</span>
      										<span>By Jack chen</span>
      									</div>
      								</div>
      															<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms">
      									<a href="http://www.miracleart.cn/faq/1796821278.html" title="Date Everything: Dirk And Harper Relationship Guide" class="phpgenera_Details_mainR4_bottom_title">Date Everything: Dirk And Harper Relationship Guide</a>
      									<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms_info">
      										<span>4 weeks ago</span>
      										<span>By Jack chen</span>
      									</div>
      								</div>
      														</div>
      							<div   id="377j5v51b"   class="phpgenera_Details_mainR3_more">
      								<a href="http://www.miracleart.cn/article.html">Show More</a>
      							</div>
      						</div>
      					</div>
      
      
      											<div   id="377j5v51b"   class="phpgenera_Details_mainR3">
      							<div   id="377j5v51b"   class="phpmain1_4R_readrank">
      								<div   id="377j5v51b"   class="phpmain1_4R_readrank_top">
      									<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
      										onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
      										src="/static/imghw/hottools2.png" alt="" />
      									<h2>Hot Tools</h2>
      								</div>
      								<div   id="377j5v51b"   class="phpgenera_Details_mainR3_bottom">
      																		<div   id="377j5v51b"   class="phpmain_tab2_mids_top">
      											<a href="http://www.miracleart.cn/toolset/development-tools/92" title="Notepad++7.3.1" class="phpmain_tab2_mids_top_img">
      												<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
      													onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
      													class="lazy"  data-src="https://img.php.cn/upload/manual/000/000/001/58ab96f0f39f7357.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="Notepad++7.3.1" />
      											</a>
      											<div   id="377j5v51b"   class="phpmain_tab2_mids_info">
      												<a href="http://www.miracleart.cn/toolset/development-tools/92" title="Notepad++7.3.1" class="phpmain_tab2_mids_title">
      													<h3>Notepad++7.3.1</h3>
      												</a>
      												<p>Easy-to-use and free code editor</p>
      											</div>
      										</div>
      																			<div   id="377j5v51b"   class="phpmain_tab2_mids_top">
      											<a href="http://www.miracleart.cn/toolset/development-tools/93" title="SublimeText3 Chinese version" class="phpmain_tab2_mids_top_img">
      												<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
      													onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
      													class="lazy"  data-src="https://img.php.cn/upload/manual/000/000/001/58ab97a3baad9677.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3 Chinese version" />
      											</a>
      											<div   id="377j5v51b"   class="phpmain_tab2_mids_info">
      												<a href="http://www.miracleart.cn/toolset/development-tools/93" title="SublimeText3 Chinese version" class="phpmain_tab2_mids_title">
      													<h3>SublimeText3 Chinese version</h3>
      												</a>
      												<p>Chinese version, very easy to use</p>
      											</div>
      										</div>
      																			<div   id="377j5v51b"   class="phpmain_tab2_mids_top">
      											<a href="http://www.miracleart.cn/toolset/development-tools/121" title="Zend Studio 13.0.1" class="phpmain_tab2_mids_top_img">
      												<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
      													onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
      													class="lazy"  data-src="https://img.php.cn/upload/manual/000/000/001/58ab97ecd1ab2670.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="Zend Studio 13.0.1" />
      											</a>
      											<div   id="377j5v51b"   class="phpmain_tab2_mids_info">
      												<a href="http://www.miracleart.cn/toolset/development-tools/121" title="Zend Studio 13.0.1" class="phpmain_tab2_mids_title">
      													<h3>Zend Studio 13.0.1</h3>
      												</a>
      												<p>Powerful PHP integrated development environment</p>
      											</div>
      										</div>
      																			<div   id="377j5v51b"   class="phpmain_tab2_mids_top">
      											<a href="http://www.miracleart.cn/toolset/development-tools/469" title="Dreamweaver CS6" class="phpmain_tab2_mids_top_img">
      												<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
      													onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
      													class="lazy"  data-src="https://img.php.cn/upload/manual/000/000/001/58d0e0fc74683535.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="Dreamweaver CS6" />
      											</a>
      											<div   id="377j5v51b"   class="phpmain_tab2_mids_info">
      												<a href="http://www.miracleart.cn/toolset/development-tools/469" title="Dreamweaver CS6" class="phpmain_tab2_mids_title">
      													<h3>Dreamweaver CS6</h3>
      												</a>
      												<p>Visual web development tools</p>
      											</div>
      										</div>
      																			<div   id="377j5v51b"   class="phpmain_tab2_mids_top">
      											<a href="http://www.miracleart.cn/toolset/development-tools/500" title="SublimeText3 Mac version" class="phpmain_tab2_mids_top_img">
      												<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
      													onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
      													class="lazy"  data-src="https://img.php.cn/upload/manual/000/000/001/58d34035e2757995.png?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3 Mac version" />
      											</a>
      											<div   id="377j5v51b"   class="phpmain_tab2_mids_info">
      												<a href="http://www.miracleart.cn/toolset/development-tools/500" title="SublimeText3 Mac version" class="phpmain_tab2_mids_title">
      													<h3>SublimeText3 Mac version</h3>
      												</a>
      												<p>God-level code editing software (SublimeText3)</p>
      											</div>
      										</div>
      																	</div>
      								<div   id="377j5v51b"   class="phpgenera_Details_mainR3_more">
      									<a href="http://www.miracleart.cn/ai">Show More</a>
      								</div>
      							</div>
      						</div>
      										
      
      					
      					<div   id="377j5v51b"   class="phpgenera_Details_mainR4">
      						<div   id="377j5v51b"   class="phpmain1_4R_readrank">
      							<div   id="377j5v51b"   class="phpmain1_4R_readrank_top">
      								<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
      									onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
      									src="/static/imghw/hotarticle2.png" alt="" />
      								<h2>Hot Topics</h2>
      							</div>
      							<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottom">
      															<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms">
      									<a href="http://www.miracleart.cn/faq/gmailyxdlrkzn" title="Where is the login entrance for gmail email?" class="phpgenera_Details_mainR4_bottom_title">Where is the login entrance for gmail email?</a>
      									<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms_info">
      										<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms_infos">
      											<img src="/static/imghw/eyess.png" alt="" />
      											<span>8638</span>
      										</div>
      										<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms_infos">
      											<img src="/static/imghw/tiezi.png" alt="" />
      											<span>17</span>
      										</div>
      									</div>
      								</div>
      															<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms">
      									<a href="http://www.miracleart.cn/faq/java-tutorial" title="Java Tutorial" class="phpgenera_Details_mainR4_bottom_title">Java Tutorial</a>
      									<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms_info">
      										<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms_infos">
      											<img src="/static/imghw/eyess.png" alt="" />
      											<span>1783</span>
      										</div>
      										<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms_infos">
      											<img src="/static/imghw/tiezi.png" alt="" />
      											<span>16</span>
      										</div>
      									</div>
      								</div>
      															<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms">
      									<a href="http://www.miracleart.cn/faq/cakephp-tutor" title="CakePHP Tutorial" class="phpgenera_Details_mainR4_bottom_title">CakePHP Tutorial</a>
      									<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms_info">
      										<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms_infos">
      											<img src="/static/imghw/eyess.png" alt="" />
      											<span>1728</span>
      										</div>
      										<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms_infos">
      											<img src="/static/imghw/tiezi.png" alt="" />
      											<span>56</span>
      										</div>
      									</div>
      								</div>
      															<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms">
      									<a href="http://www.miracleart.cn/faq/laravel-tutori" title="Laravel Tutorial" class="phpgenera_Details_mainR4_bottom_title">Laravel Tutorial</a>
      									<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms_info">
      										<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms_infos">
      											<img src="/static/imghw/eyess.png" alt="" />
      											<span>1579</span>
      										</div>
      										<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms_infos">
      											<img src="/static/imghw/tiezi.png" alt="" />
      											<span>28</span>
      										</div>
      									</div>
      								</div>
      															<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms">
      									<a href="http://www.miracleart.cn/faq/php-tutorial" title="PHP Tutorial" class="phpgenera_Details_mainR4_bottom_title">PHP Tutorial</a>
      									<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms_info">
      										<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms_infos">
      											<img src="/static/imghw/eyess.png" alt="" />
      											<span>1444</span>
      										</div>
      										<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms_infos">
      											<img src="/static/imghw/tiezi.png" alt="" />
      											<span>31</span>
      										</div>
      									</div>
      								</div>
      														</div>
      							<div   id="377j5v51b"   class="phpgenera_Details_mainR3_more">
      								<a href="http://www.miracleart.cn/faq/zt">Show More</a>
      							</div>
      						</div>
      					</div>
      				</div>
      			</div>
      							<div   id="377j5v51b"   class="Article_Details_main2">
      					<div   id="377j5v51b"   class="phpgenera_Details_mainL4">
      						<div   id="377j5v51b"   class="phpmain1_2_top">
      							<a href="javascript:void(0);" class="phpmain1_2_top_title">Related knowledge<img
      									src="/static/imghw/index2_title2.png" alt="" /></a>
      						</div>
      						<div   id="377j5v51b"   class="phpgenera_Details_mainL4_info">
      
      													<div   id="377j5v51b"   class="phphistorical_Version2_mids">
      								<a href="http://www.miracleart.cn/faq/1796822239.html" title="How do I stay up-to-date with the latest HTML standards and best practices?" class="phphistorical_Version2_mids_img">
      									<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
      										src="/static/imghw/default1.png" class="lazy"  data-src="https://img.php.cn/upload/article/001/253/068/175037959235285.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="How do I stay up-to-date with the latest HTML standards and best practices?" />
      								</a>
      								<a href="http://www.miracleart.cn/faq/1796822239.html" title="How do I stay up-to-date with the latest HTML standards and best practices?" class="phphistorical_Version2_mids_title">How do I stay up-to-date with the latest HTML standards and best practices?</a>
      								<span id="377j5v51b"    class="Articlelist_txts_time">Jun 20, 2025 am	 08:33 AM</span>
      								<p class="Articlelist_txts_p">The key to keep up with HTML standards and best practices is to do it intentionally rather than follow it blindly. First, follow the summary or update logs of official sources such as WHATWG and W3C, understand new tags (such as) and attributes, and use them as references to solve difficult problems; second, subscribe to trusted web development newsletters and blogs, spend 10-15 minutes a week to browse updates, focus on actual use cases rather than just collecting articles; second, use developer tools and linters such as HTMLHint to optimize the code structure through instant feedback; finally, interact with the developer community, share experiences and learn other people's practical skills, so as to continuously improve HTML skills.</p>
      							</div>
      														<div   id="377j5v51b"   class="phphistorical_Version2_mids">
      								<a href="http://www.miracleart.cn/faq/1796821966.html" title="How do I use the  element to represent the main content of a document?" class="phphistorical_Version2_mids_img">
      									<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
      										src="/static/imghw/default1.png" class="lazy"  data-src="https://img.php.cn/upload/article/001/253/068/175034575284018.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="How do I use the  element to represent the main content of a document?" />
      								</a>
      								<a href="http://www.miracleart.cn/faq/1796821966.html" title="How do I use the  element to represent the main content of a document?" class="phphistorical_Version2_mids_title">How do I use the  element to represent the main content of a document?</a>
      								<span id="377j5v51b"    class="Articlelist_txts_time">Jun 19, 2025 pm	 11:09 PM</span>
      								<p class="Articlelist_txts_p">The reason for using tags is to improve the semantic structure and accessibility of web pages, make it easier for screen readers and search engines to understand page content, and allow users to quickly jump to core content. Here are the key points: 1. Each page should contain only one element; 2. It should not include content that is repeated across pages (such as sidebars or footers); 3. It can be used in conjunction with ARIA properties to enhance accessibility. Usually located after and before, it is used to wrap unique page content, such as articles, forms or product details, and should be avoided in, or in; to improve accessibility, aria-labeledby or aria-label can be used to clearly identify parts.</p>
      							</div>
      														<div   id="377j5v51b"   class="phphistorical_Version2_mids">
      								<a href="http://www.miracleart.cn/faq/1796823670.html" title="How do I minimize the size of HTML files?" class="phphistorical_Version2_mids_img">
      									<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
      										src="/static/imghw/default1.png" class="lazy"  data-src="https://img.php.cn/upload/article/001/253/068/175069761263762.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="How do I minimize the size of HTML files?" />
      								</a>
      								<a href="http://www.miracleart.cn/faq/1796823670.html" title="How do I minimize the size of HTML files?" class="phphistorical_Version2_mids_title">How do I minimize the size of HTML files?</a>
      								<span id="377j5v51b"    class="Articlelist_txts_time">Jun 24, 2025 am	 12:53 AM</span>
      								<p class="Articlelist_txts_p">To reduce the size of HTML files, you need to clean up redundant code, compress content, and optimize structure. 1. Delete unused tags, comments and extra blanks to reduce volume; 2. Move inline CSS and JavaScript to external files and merge multiple scripts or style blocks; 3. Simplify label syntax without affecting parsing, such as omitting optional closed tags or using short attributes; 4. After cleaning, enable server-side compression technologies such as Gzip or Brotli to further reduce the transmission volume. These steps can significantly improve page loading performance without sacrificing functionality.</p>
      							</div>
      														<div   id="377j5v51b"   class="phphistorical_Version2_mids">
      								<a href="http://www.miracleart.cn/faq/1796821965.html" title="How do I create a basic HTML document?" class="phphistorical_Version2_mids_img">
      									<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
      										src="/static/imghw/default1.png" class="lazy"  data-src="https://img.php.cn/upload/article/001/253/068/175034527243743.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="How do I create a basic HTML document?" />
      								</a>
      								<a href="http://www.miracleart.cn/faq/1796821965.html" title="How do I create a basic HTML document?" class="phphistorical_Version2_mids_title">How do I create a basic HTML document?</a>
      								<span id="377j5v51b"    class="Articlelist_txts_time">Jun 19, 2025 pm	 11:01 PM</span>
      								<p class="Articlelist_txts_p">To create a basic HTML document, you first need to understand its basic structure and write code in a standard format. 1. Use the declaration document type at the beginning; 2. Use the tag to wrap the entire content; 3. Include and two main parts in it, which are used to store metadata such as titles, style sheet links, etc., and include user-visible content such as titles, paragraphs, pictures and links; 4. Save the file in .html format and open the viewing effect in the browser; 5. Then you can gradually add more elements to enrich the page content. Follow these steps to quickly build a basic web page.</p>
      							</div>
      														<div   id="377j5v51b"   class="phphistorical_Version2_mids">
      								<a href="http://www.miracleart.cn/faq/1796821968.html" title="How do I create checkboxes in HTML using the  element?" class="phphistorical_Version2_mids_img">
      									<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
      										src="/static/imghw/default1.png" class="lazy"  data-src="https://img.php.cn/upload/article/001/253/068/175034767289886.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="How do I create checkboxes in HTML using the  element?" />
      								</a>
      								<a href="http://www.miracleart.cn/faq/1796821968.html" title="How do I create checkboxes in HTML using the  element?" class="phphistorical_Version2_mids_title">How do I create checkboxes in HTML using the  element?</a>
      								<span id="377j5v51b"    class="Articlelist_txts_time">Jun 19, 2025 pm	 11:41 PM</span>
      								<p class="Articlelist_txts_p">To create an HTML checkbox, use the type attribute to set the element of the checkbox. 1. The basic structure includes id, name and label tags to ensure that clicking text can switch options; 2. Multiple related check boxes should use the same name but different values, and wrap them with fieldset to improve accessibility; 3. Hide native controls when customizing styles and use CSS to design alternative elements while maintaining the complete functions; 4. Ensure availability, pair labels, support keyboard navigation, and avoid relying on only visual prompts. The above steps can help developers correctly implement checkbox components that have both functional and aesthetics.</p>
      							</div>
      														<div   id="377j5v51b"   class="phphistorical_Version2_mids">
      								<a href="http://www.miracleart.cn/faq/1796823674.html" title="How has HTML evolved over time, and what are the key milestones in its history?" class="phphistorical_Version2_mids_img">
      									<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
      										src="/static/imghw/default1.png" class="lazy"  data-src="https://img.php.cn/upload/article/001/253/068/175069767173496.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="How has HTML evolved over time, and what are the key milestones in its history?" />
      								</a>
      								<a href="http://www.miracleart.cn/faq/1796823674.html" title="How has HTML evolved over time, and what are the key milestones in its history?" class="phphistorical_Version2_mids_title">How has HTML evolved over time, and what are the key milestones in its history?</a>
      								<span id="377j5v51b"    class="Articlelist_txts_time">Jun 24, 2025 am	 12:54 AM</span>
      								<p class="Articlelist_txts_p">HTMLhasevolvedsignificantlysinceitscreationtomeetthegrowingdemandsofwebdevelopersandusers.Initiallyasimplemarkuplanguageforsharingdocuments,ithasundergonemajorupdates,includingHTML2.0,whichintroducedforms;HTML3.x,whichaddedvisualenhancementsandlayout</p>
      							</div>
      														<div   id="377j5v51b"   class="phphistorical_Version2_mids">
      								<a href="http://www.miracleart.cn/faq/1796824133.html" title="How do I use the  element to represent the footer of a document or section?" class="phphistorical_Version2_mids_img">
      									<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
      										src="/static/imghw/default1.png" class="lazy"  data-src="https://img.php.cn/upload/article/001/253/068/175078424215034.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="How do I use the  element to represent the footer of a document or section?" />
      								</a>
      								<a href="http://www.miracleart.cn/faq/1796824133.html" title="How do I use the  element to represent the footer of a document or section?" class="phphistorical_Version2_mids_title">How do I use the  element to represent the footer of a document or section?</a>
      								<span id="377j5v51b"    class="Articlelist_txts_time">Jun 25, 2025 am	 12:57 AM</span>
      								<p class="Articlelist_txts_p">It is a semantic tag used in HTML5 to define the bottom of the page or content block, usually including copyright information, contact information or navigation links; it can be placed at the bottom of the page or nested in, etc. tags as the end of the block; when using it, you should pay attention to avoid repeated abuse and irrelevant content.</p>
      							</div>
      														<div   id="377j5v51b"   class="phphistorical_Version2_mids">
      								<a href="http://www.miracleart.cn/faq/1796823682.html" title="How do I use the tabindex attribute to control the tab order of elements?" class="phphistorical_Version2_mids_img">
      									<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
      										src="/static/imghw/default1.png" class="lazy"  data-src="https://img.php.cn/upload/article/001/253/068/175069781150026.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="How do I use the tabindex attribute to control the tab order of elements?" />
      								</a>
      								<a href="http://www.miracleart.cn/faq/1796823682.html" title="How do I use the tabindex attribute to control the tab order of elements?" class="phphistorical_Version2_mids_title">How do I use the tabindex attribute to control the tab order of elements?</a>
      								<span id="377j5v51b"    class="Articlelist_txts_time">Jun 24, 2025 am	 12:56 AM</span>
      								<p class="Articlelist_txts_p">ThetabindexattributecontrolshowelementsreceivefocusviatheTabkey,withthreemainvalues:tabindex="0"addsanelementtothenaturaltaborder,tabindex="-1"allowsprogrammaticfocusonly,andtabindex="n"(positivenumber)setsacustomtabbing</p>
      							</div>
      													</div>
      
      													<a href="http://www.miracleart.cn/web-designer.html" class="phpgenera_Details_mainL4_botton">
      								<span>See all articles</span>
      								<img src="/static/imghw/down_right.png" alt="" />
      							</a>
      											</div>
      				</div>
      					</div>
      	</main>
      	<footer>
          <div   id="377j5v51b"   class="footer">
              <div   id="377j5v51b"   class="footertop">
                  <img src="/static/imghw/logo.png" alt="">
                  <p>Public welfare online PHP training,Help PHP learners grow quickly!</p>
              </div>
              <div   id="377j5v51b"   class="footermid">
                  <a href="http://www.miracleart.cn/about/us.html">About us</a>
                  <a href="http://www.miracleart.cn/about/disclaimer.html">Disclaimer</a>
                  <a href="http://www.miracleart.cn/update/article_0_1.html">Sitemap</a>
              </div>
              <div   id="377j5v51b"   class="footerbottom">
                  <p>
                      ? php.cn All rights reserved
                  </p>
              </div>
          </div>
      </footer>
      
      <input type="hidden" id="verifycode" value="/captcha.html">
      
      
      
      
      		<link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css?2' type='text/css' media='all' />
      	
      	
      	
      	
      	
      
      	
      	
      
      
      
      
      
      
      <footer>
      <div class="friendship-link">
      <p>感谢您访问我们的网站,您可能还对以下资源感兴趣:</p>
      <a href="http://www.miracleart.cn/" title="国产av日韩一区二区三区精品">国产av日韩一区二区三区精品</a>
      
      <div class="friend-links">
      
      
      </div>
      </div>
      
      </footer>
      
      
      <script>
      (function(){
          var bp = document.createElement('script');
          var curProtocol = window.location.protocol.split(':')[0];
          if (curProtocol === 'https') {
              bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
          }
          else {
              bp.src = 'http://push.zhanzhang.baidu.com/push.js';
          }
          var s = document.getElementsByTagName("script")[0];
          s.parentNode.insertBefore(bp, s);
      })();
      </script>
      </body><div id="m0w22" class="pl_css_ganrao" style="display: none;"><code id="m0w22"></code><kbd id="m0w22"></kbd><optgroup id="m0w22"><xmp id="m0w22"></xmp></optgroup><abbr id="m0w22"><strike id="m0w22"><samp id="m0w22"></samp></strike></abbr><samp id="m0w22"></samp><wbr id="m0w22"><pre id="m0w22"><input id="m0w22"></input></pre></wbr><dfn id="m0w22"><center id="m0w22"><cite id="m0w22"></cite></center></dfn><table id="m0w22"><dd id="m0w22"><li id="m0w22"></li></dd></table><del id="m0w22"></del><noframes id="m0w22"></noframes><wbr id="m0w22"></wbr><xmp id="m0w22"></xmp><rt id="m0w22"></rt><cite id="m0w22"></cite><acronym id="m0w22"></acronym><center id="m0w22"></center><cite id="m0w22"></cite><strong id="m0w22"></strong><optgroup id="m0w22"></optgroup><kbd id="m0w22"></kbd><wbr id="m0w22"></wbr><dd id="m0w22"></dd><sup id="m0w22"><menu id="m0w22"><xmp id="m0w22"></xmp></menu></sup><del id="m0w22"></del><nav id="m0w22"></nav><bdo id="m0w22"></bdo><tr id="m0w22"><abbr id="m0w22"><menu id="m0w22"></menu></abbr></tr><wbr id="m0w22"></wbr><kbd id="m0w22"><cite id="m0w22"><center id="m0w22"></center></cite></kbd><ul id="m0w22"></ul><tbody id="m0w22"><tr id="m0w22"><bdo id="m0w22"></bdo></tr></tbody><dd id="m0w22"><em id="m0w22"><rt id="m0w22"></rt></em></dd><table id="m0w22"></table><td id="m0w22"></td><noframes id="m0w22"><fieldset id="m0w22"><dd id="m0w22"></dd></fieldset></noframes><optgroup id="m0w22"><menu id="m0w22"><samp id="m0w22"></samp></menu></optgroup><blockquote id="m0w22"></blockquote><tbody id="m0w22"></tbody><rt id="m0w22"></rt><nav id="m0w22"></nav><table id="m0w22"></table><abbr id="m0w22"></abbr><optgroup id="m0w22"><xmp id="m0w22"></xmp></optgroup><blockquote id="m0w22"></blockquote><code id="m0w22"><pre id="m0w22"><nav id="m0w22"></nav></pre></code><s id="m0w22"></s><ul id="m0w22"></ul><table id="m0w22"></table><small id="m0w22"><tbody id="m0w22"><del id="m0w22"></del></tbody></small><center id="m0w22"><tbody id="m0w22"><tfoot id="m0w22"></tfoot></tbody></center><td id="m0w22"></td><acronym id="m0w22"></acronym><cite id="m0w22"></cite><center id="m0w22"><abbr id="m0w22"><s id="m0w22"></s></abbr></center><s id="m0w22"><pre id="m0w22"><optgroup id="m0w22"></optgroup></pre></s><input id="m0w22"><tr id="m0w22"><abbr id="m0w22"></abbr></tr></input><del id="m0w22"></del><tfoot id="m0w22"></tfoot><pre id="m0w22"><s id="m0w22"><pre id="m0w22"></pre></s></pre><button id="m0w22"></button><button id="m0w22"></button><noframes id="m0w22"><nav id="m0w22"><tfoot id="m0w22"></tfoot></nav></noframes><delect id="m0w22"></delect><cite id="m0w22"></cite><del id="m0w22"><code id="m0w22"><th id="m0w22"></th></code></del><bdo id="m0w22"><tr id="m0w22"><sup id="m0w22"></sup></tr></bdo><table id="m0w22"></table><table id="m0w22"></table><xmp id="m0w22"><del id="m0w22"><table id="m0w22"></table></del></xmp><ul id="m0w22"><optgroup id="m0w22"><th id="m0w22"></th></optgroup></ul><pre id="m0w22"><acronym id="m0w22"><small id="m0w22"></small></acronym></pre><bdo id="m0w22"><wbr id="m0w22"><abbr id="m0w22"></abbr></wbr></bdo><tfoot id="m0w22"><tr id="m0w22"><abbr id="m0w22"></abbr></tr></tfoot><tbody id="m0w22"></tbody><bdo id="m0w22"></bdo><del id="m0w22"></del><button id="m0w22"><code id="m0w22"><wbr id="m0w22"></wbr></code></button><blockquote id="m0w22"><em id="m0w22"><strong id="m0w22"></strong></em></blockquote><pre id="m0w22"></pre><s id="m0w22"></s><wbr id="m0w22"></wbr><abbr id="m0w22"><dl id="m0w22"><pre id="m0w22"></pre></dl></abbr><menu id="m0w22"></menu><rt id="m0w22"><pre id="m0w22"><optgroup id="m0w22"></optgroup></pre></rt><em id="m0w22"></em><wbr id="m0w22"></wbr><pre id="m0w22"><tr id="m0w22"><fieldset id="m0w22"></fieldset></tr></pre><tbody id="m0w22"><ul id="m0w22"><fieldset id="m0w22"></fieldset></ul></tbody><small id="m0w22"></small><dd id="m0w22"></dd><td id="m0w22"></td><center id="m0w22"><option id="m0w22"><strong id="m0w22"></strong></option></center><sup id="m0w22"></sup><strike id="m0w22"></strike><acronym id="m0w22"><small id="m0w22"><td id="m0w22"></td></small></acronym><nav id="m0w22"><dd id="m0w22"><em id="m0w22"></em></dd></nav><blockquote id="m0w22"><option id="m0w22"><optgroup id="m0w22"></optgroup></option></blockquote><del id="m0w22"></del><acronym id="m0w22"></acronym><s id="m0w22"></s><samp id="m0w22"></samp><delect id="m0w22"></delect><tbody id="m0w22"></tbody><rt id="m0w22"></rt><object id="m0w22"></object><strike id="m0w22"></strike><table id="m0w22"></table><xmp id="m0w22"></xmp><nav id="m0w22"><input id="m0w22"><delect id="m0w22"></delect></input></nav><tbody id="m0w22"></tbody><wbr id="m0w22"><abbr id="m0w22"></abbr></wbr><strong id="m0w22"></strong><tr id="m0w22"></tr><dfn id="m0w22"><li id="m0w22"><input id="m0w22"></input></li></dfn><tr id="m0w22"></tr><samp id="m0w22"></samp><acronym id="m0w22"></acronym><menu id="m0w22"></menu><pre id="m0w22"><optgroup id="m0w22"><center id="m0w22"></center></optgroup></pre><tfoot id="m0w22"></tfoot><dfn id="m0w22"></dfn><s id="m0w22"></s><strike id="m0w22"><option id="m0w22"><source id="m0w22"></source></option></strike><del id="m0w22"><table id="m0w22"><input id="m0w22"></input></table></del><li id="m0w22"></li><abbr id="m0w22"><s id="m0w22"><option id="m0w22"></option></s></abbr><dfn id="m0w22"></dfn><center id="m0w22"></center><nav id="m0w22"></nav><tr id="m0w22"></tr><cite id="m0w22"></cite><strike id="m0w22"><option id="m0w22"><source id="m0w22"></source></option></strike><pre id="m0w22"></pre><ul id="m0w22"><menu id="m0w22"><xmp id="m0w22"></xmp></menu></ul><th id="m0w22"></th><strike id="m0w22"></strike><s id="m0w22"></s><wbr id="m0w22"></wbr><wbr id="m0w22"><pre id="m0w22"><input id="m0w22"></input></pre></wbr><menu id="m0w22"><samp id="m0w22"><del id="m0w22"></del></samp></menu><tr id="m0w22"></tr><code id="m0w22"></code><dfn id="m0w22"><table id="m0w22"><th id="m0w22"></th></table></dfn><abbr id="m0w22"></abbr><dfn id="m0w22"><kbd id="m0w22"><nav id="m0w22"></nav></kbd></dfn><tfoot id="m0w22"><em id="m0w22"><abbr id="m0w22"></abbr></em></tfoot><fieldset id="m0w22"></fieldset><cite id="m0w22"></cite></div>
      
      </html>