861014 - Floating child breaks margins from adjacent selector

Status: RESOLVED DUPLICATE of bug 451791

(Core :: Layout: Floats, defect)

Description

[Shane S. Anderson]

Attachment: cases.html

User Agent: Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; WOW64; Trident/6.0; .NET4.0E; .NET4.0C; .NET CLR 3.5.30729; .NET CLR 2.0.50727; .NET CLR 3.0.30729)

Steps to reproduce:

Combined adjacent selector and negative margins to have a small margin between elements but a larger margin after the set of them, e.g.:
.field { margin-bottom: 20px; }
.field + .field { margin-top: -15px; }

Added a floating child to that element, e.g.:
.field::after { content: ""; display: block; clear: both; }
.field label { float: left; }

Added multiple elements together, as the only elements in a block, e.g.:
<form>
  <div class="field"><label>Label 1:</label></div>
  <div class="field"><label>Label 2:</label></div>
</form>


Actual results:

Negative margin was applied to all <div class="field" /> elements.


Expected results:

Negative margin should have been applied to the second <div class="field" /> element.

Comment 1

[philippe (part-time)]

Sounds very much like bug 451791.

Comment 2

[Boris Zbarsky [:bzbarsky]]

Indeed.