关于float，造成前后元素影响

 

<div class="box">
    <div class="box1">破坏者</div>
    <div class="box2">受害者</div>
</div>

 例子1：

1-- 浮动元素在后面

1> 前面是块级元素
---则浮动元素会另起一行一直向浮动方向偏移，直到遇到包裹元素内外边界

受害者

破坏者

 2> 前面是行内元素
---则浮动元素会偏移到行内元素前面，造成一种行内元素包裹浮动元素的效果

 

受害者

破坏者

 

 2-- 浮动元素在前面

 

1> 后面是行内元素
---则浮动元素前前偏移直到遇到包裹元素内外边界，造成一种行内元素包裹浮动元素的效果 与1-2一样的效果

破坏者

受害者

 

2> 后面是块级元素
---则浮动元素前前偏移直到遇到包裹元素内外边界，此时后面的块级元素会无视前面的浮动元素，定位在正常文档流中，但是由于浮动元素的影响导致后面的块级元素内容会被挤到下一行显示，这也许就是块级元素的定义，会在尾巴或者头部添加一个换行符

 

破坏者

受害者