CSS的float属性对周围元素位置的影响

float属性定义了元素可以往哪个方向浮动，float常见的值有：
left 元素向左浮动。
right 元素向右浮动。
none 默认值。元素不浮动，并会显示在其在文本中出现的位置。
inherit 规定应该从父元素继承 float 属性的值。

但是常常在设置了float属性后，其后的一些元素位置变得混乱了，如下图是我原本的布局

当我把元素设置浮动后，原本在下方的图片也跑到右侧横向排列了：

是因为在设置块级元素浮动时，设置浮动后，会影响紧邻它后面的那一个元素！
块级元素（ul）和是纵向排列，行级元素（img）都是横向排列，float属性能够使纵向排列的块级元素横向排列。但是同时 可能会影响 设置float属性的元素下一个元素的位置，这时只要在对下一个CSS设置clear：both或者overflow：hidden。就可以消除这种影响。

img{
    *clear: both;/*在紧邻的上一个标签设置成浮动后，对下一个标签也就是现在的标签有影响，清除带来的影响,另一种方法 overflow: hidden;    width: 100%;*/*
    border: 1px solid #b1adad;/*设置图片的边框，这个边框线的颜色很漂亮哦*/
    width: 300px;
    height: 300px;
}

添加代码这句代码后，就可以得到我想要的效果啦！

在使用CSS对元素设置样式的时候，元素有块级元素和行级元素之分，知道一些常见的行级元素和块级元素在使用的时候可以避免一些不必要的错误。

在父标签没有设置浮动，而子标签设置浮动后也可能会影响到父标签，这时clear：both不起作用，要用overflow：hidden来消除影响。