VSでネストされた隣接するdiv

Question

私は、VS 2013のASP.NETプロジェクトで進行状況インジケータのレイアウトをいくつか試していましたが、生成されたマークアップで奇妙なものが見つかりました。

<div id="divProgressBar"> 
 
     <div id="divProgressVisual"> 
 
      <asp:Image ID="imgCircle1" runat="server" CssClass="progress circle" style="margin-left: 34px;" ImageUrl="images/GrayCircle.png" /> 
 
      <asp:Image ID="imgLine2" runat="server" CssClass="progress line" ImageUrl="images/GrayLine.png" /> 
 
      <asp:Image ID="imgCircle2" runat="server" CssClass="progress circle" ImageUrl="images/GrayCircle.png" /> 
 
      <asp:Image ID="imgLine3" runat="server" CssClass="progress line" ImageUrl="images/GrayLine.png" /> 
 
      <asp:Image ID="imgCircle3" runat="server" CssClass="progress circle" ImageUrl="images/GrayCircle.png" /> 
 
      <asp:Image ID="imgLine4" runat="server" CssClass="progress line" ImageUrl="images/GrayLine.png" /> 
 
      <asp:Image ID="imgCircle4" runat="server" CssClass="progress circle" ImageUrl="images/GrayCircle.png" /> 
 
      <div style="clear: both;" /> 
 
     </div> 
 
     <div id="divProgressLabels"> 
 
      <span class="labelblock">|<br />Upload File</span> 
 
      <span class="labelblock">|<br />Import Into Database</span> 
 
      <span class="labelblock">|<br />Perform Comparison</span> 
 
      <span class="labelblock">|<br />Export File</span> 
 
      <div style="clear: both;" /> 
 
     </div> 
 
    </div>

このdiv要素は、それは価値がある何のために、マスターページ内に落下なっている：私の.aspxのページには、次のコードが含まれています。これはレイアウトの問題ではないので、CSSについて心配しないでください。私はFirebugの中に結果のHTMLを表示すると

、私はこれを参照してください。

<div id="divProgressBar"> 
 
    <div id="divProgressVisual"> 
 
    <img id="MainContent_imgCircle1" class="progress circle" src="images/GrayCircle.png" style="margin-left: 34px;"> 
 
    <img id="MainContent_imgLine2" class="progress line" src="images/GrayLine.png"> 
 
    <img id="MainContent_imgCircle2" class="progress circle" src="images/GrayCircle.png"> 
 
    <img id="MainContent_imgLine3" class="progress line" src="images/GrayLine.png"> 
 
    <img id="MainContent_imgCircle3" class="progress circle" src="images/GrayCircle.png"> 
 
    <img id="MainContent_imgLine4" class="progress line" src="images/GrayLine.png"> 
 
    <img id="MainContent_imgCircle4" class="progress circle" src="images/GrayCircle.png"> 
 
    <div style="clear: both;"> </div> 
 
    <div id="divProgressLabels"> 
 
     <span class="labelblock"> 
 
     | 
 
     <br> 
 
     Upload File 
 
     </span> 
 
     <span class="labelblock"> 
 
     | 
 
     <br> 
 
     Import Into Database 
 
     </span> 
 
     <span class="labelblock"> 
 
     | 
 
     <br> 
 
     Perform Comparison 
 
     </span> 
 
     <span class="labelblock"> 
 
     | 
 
     <br> 
 
     Export File 
 
     </span> 
 
     <div style="clear: both;"> </div> 
 
    </div> 
 
    </div> 
 
</div>

divProgressLabelsが突然divProgressVisualの内部にネストされました！この場合、これはレイアウト上の問題を引き起こすものではありませんが、むしろ変だと思います。なぜこれをやっているのか、どうやって止めるのかを知りたいのです。

Answer 1

変更

<div style="clear: both;" /> 

<div style="clear: both;"></div> 

にもAre self-closing tags valid in HTML5?を参照してください。