float

一、float造成的效果

1、使元素本身变成了类似于inline-block的元素

2、使包裹它的元素忽略它的高度，即父元素没有了高度

下面的例子：给子元素box设置了height:100px;此时的父元素height也是100px。

 

 

给子元素box设置float：left之后，父元素的高度变成了0，即高度塌陷了。

 

 

 解决方法：给父元素设置：overflow:hidden

 

 二、

float使元素脱离了文档流按照指定的方向发生了移动，直到它的外边缘碰到包含框或者另一个浮动的边框为止。

浮动只会影响他后面的元素，如果上面的元素不浮动，他也不会上去的

 如果父元素太窄，无法容纳所有的浮动元素，无法容纳的浮动元素会换行显示。

以换行的那个元素为基准，如果有浮动元素的高度大于换行的那个元素，那么当换行元素换行时会被高的那个元素"卡住"

三、清除浮动

1、针对子元素：给浮动的子元素后面再加一个元素，加上一个clear：both属性即可正常显示，缺点是随意添加了一个空元素，不符合代码规范

2、针对父元素：给父元素后面添加一个相邻的空元素，设置clear属性，但只是让后面的元素正常显示，并没有撑开父元素的高度

3、针对父元素：给父元素设置高度，可以正常显示，但扩展性不好，因为一般都是由里面的内容来撑开高度

4、针对父元素：给父元素设置display: inline-block，可以正常显示，但父元素的margin：auto失效了，而且会发现上下两个部分会出现间隙

5、针对父元素：给父元素设置overflow: hidden，可以正常显示了，但需要配合宽度，否则会默认占满一行。