css之清除浮动影响

       我们都知道在css里元素分为块级元素和内联元素，而块级元素的特点就是：元素独占一行，那么如果我们需要几个块级元素在同一行显示，该怎么办呢？

第一种：设置display：inline-block

第二种：设置float

第三种：设置position

        今天先说说float这个属性，顾名思义，float就是浮动，让块级元素通过浮动，从而达到并列显示的效果，但是使用float会带来一些“副作用”，什么副作用的呢？

第一：边框不能被撑开

例如：

在浏览器中显示为：

如上图显示：父级（红色边框上下重合）不能被撑开；

第二：背景不能显示

这个问题是显而易见的，父级不能被撑开，背景颜色，图片什么的肯定是不能正常那个显示了.......

第三：margin，padding 属性设置也不能正常显示

那么.....如何清除这些因float带来的影响呢........

第一：给父级元素设置高和宽（一般要大于等于子元素的并列宽及高）；

第二：给父级元素设置overflow:hidden;

第三：在父级元素加一个div(此div不能设置float)，div对应的css里设置clear：both/left/right

例如：

在浏览器中显示为：