Adjacent divs getting nested by VS - html

Question

I was toying with some layout for a progress indicator in an ASP.NET project in VS 2013, and I found something odd in the markup that it generated. My .aspx page contains the following code:
<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>
This div is getting dropped into a master page, for what it's worth. Don't worry about the CSS, because this isn't a layout issue.
When I view the resulting HTML in Firebug, I see this:
<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 is suddenly nested inside of divProgressVisual! This isn't causing any layout problems in this case, but it's rather weird and I'd like to know why it's doing this and how to stop it.

Answer 1

Change
<div style="clear: both;" />
to
<div style="clear: both;"></div>
See also Are self-closing tags valid in HTML5?.