在建设网站时过多的使用浮动会产生的问题及其解决方案

在一个父元素中，如果有子元素浮动(float)，而且其父元素也没有设置高度这个时候由于子元素不占据页面空间，经常会出现父元素坍塌的问题
1.给父级元素加高度
这种方法不推荐使用因为它只适合高度固定的布局，而一般父盒子都是由内容撑起来的。
2.在结尾处添加空div标签clear:both。
在写入了clear both的元素后，它不再允许周围有浮动的元素产生，假设有两个div,一个浮动一个清楚浮动，那么浮动的div就丧失了浮动的效果，未浮动的div 所在的位置也就撑起了父元素的高度就不会造成高度坍塌。
添加一个div标签并定义一个类名，给类名添加样式clear:both，将该div标签放到父元素内容结束前的位置
缺点：会多加CSS和HTML标签
3.给父级元素定义 overflow:hidden{可以溢出隐藏，即当内容元素的高度大于其包含块的高度时，设置该属性即可把内容区域超出来的部分隐藏，使内容区域完全包含在该包含块中。}
这个的目的是让父元素包住这个脱离了文档流的浮动元素，
缺点：不能和position配合使用，因为超出的尺寸的会被隐藏
4.给父级div定义伪类：after
就是创建虚假的元素，插入到目标的元素的内容之前或者之后。