box1,box2为浮动元素，box3不浮动。此时设置box3上外边界移动会带动1和2一起移动
方法1：给box1和box2设置一个before伪元素也无法解决
方法2：给box1和box2设置一个after伪元素也无法解决
方法3：给box3设置一个before伪元素也无法解决
一个有缺陷解决方法：
设置box3也为浮动，但是此时box3的margin-left与box2y右侧重合为零点。
代码如下
``<!DOCTYPE html>
Document
<br> body{<br> font-size: 35px;<br> }<br> .box1,.box2{<br> width: 100px;<br> height: 100px;<br> border: 1px red solid;<br> }<br> .box1{<br> background: #bfa;<br> float: left;<br> }<br> /* .box1::before{<br> content: '';<br> display: table;<br> 即使在box3前面增加了一个空的元素也无法解决设置box3margin-top向下移动带动box1和box2<br> } */</p> <pre><code> .box2{ background: green; float: left; } .box3{ width: 150px; height: 150px; background: yellow; margin-top: 100px; /* float:left; */ /* 只有同时设置box3也为浮动1和2才不会一起移动 */ /* 切设置浮动后margin-left是以box2的右侧边界作为零点移动 */ } </style> </code></pre> <p></head><br> <body><br> <div class="box1">1</div><br> <div class="box2">2</div><br> <div class="box3">3</div><br> </body><br> </html>`</p> <pre><code></code></pre> <pre><code></code></pre> <pre><code></code></pre>
