设置float后，后面的元素位置问题。

这个主要看后面这个元素是块级元素还是行级元素。如果后面的元素是块级元素。例如

<style>
        #one{
            height:50px;
            width:100px;
            float: left;
            background-color: red;
        }
        #two{
            height:150px;
            width:350px;/*这个宽度不够大会把#two中的字挤下去*/
          
            background-color: yellow;
        }
    </style>

　　

<ul>
<li id=“one”>first</li>
<li id="two">second</li>
</ul>

　

　显然，li是块级元素，如果给第一个li也就是id为one的设置了float，#two的li会占据#one li的位置，但是字不会重叠。#two中的字会跟在#one中字的后面排列出来如图1所示，（注意：如果#two的宽度不够大的话，字会被挤到下一行，如图2所示，）

如果后面的元素是行级元素的话，在给第一个元素设置float后，后一个元素不会占据前一个元素的位置。而是乖乖的跟在屁股后面。例如：

        #one{
            height:50px;
            width:100px;
            float: left;
            background-color: red;
        }
        #two{
        /*因为span标签是行级元素，所以没有给他设置宽高*/
            background-color: yellow;
        }

<div id="one">first</div>
<span id="two">second</span>

　　效果如图3所示，。如果给span标签设置成display：block，使他变成块级元素的话，就和前面举得li的例子道理一样了。

总结：今天在做一个img和span标签对齐的时候无意中发现了这个问题。自己记录下来加深印象，也方便以后查阅。希望对初学者有所帮助。

转载于:https://www.cnblogs.com/SoundOfTheSea/p/7403423.html