再次总结解决元素高度塌陷的问题(围住浮动元素)

方法一:为父元素添加overflow:hidden

原始布局:

想要的效果: p元素里的文字移动到图片的右边,footer在section的下面.

给img元素加了float:left后,虽然p元素里的文字移到了img的右边,但是它的父元素高度塌陷了.

 

解决方法:给img的父元素section添加overflow:hidden,页面恢复正常.

方法二:同时浮动父元素

浮动父元素后,不管其子元素是否浮动,它都会紧紧的包围住它的子元素,为了实现上面页面的效果,需要将父元素的width设置为100%(不设置width,section的width就是img的width).

因为section现在浮动了,所以footer会努力向上挤,为了强制footer依然呆在section下面,要给它应用clear:left.被清除的元素不会被提升到浮动元素的旁边.

方法三:添加非浮动的清除元素

给父元素的最后添加一个非浮动的子元素，然后清除该子元素。

由于父元素一定会包围非浮动的子元素，而且清除会让这个子元素位于（清除一侧）浮动元素的下方，因此父元素一定会包含这个子元素——以及子元素前面的浮动元素。有两种方式,推荐使用第二种,因为第一种会添加多余的子元素.

第一种方法:

第二种方法:使用伪类添加清除元素的方法

给父元素加个类名clearfix,通过after伪类向父元素的最后添加一个空白的内容,并将这个空白的内容设置为块元素.

使用 clear:both 意味着 section中新增的子元素会清除左\右浮动元素.这里当然可以只用left ,但 both也适用于将来图片float:right 的情况.

这三种方法的使用要因地制宜。比如，不能在下拉菜单的顶级元素上应用overflow:hidden，否则作为其子元素的下拉菜单就不会显示了。因为下拉菜单会显示在其父元素区域的外部，而这恰恰是overflow:hidden所要阻止的。再比如，不能对已经靠自动外边距居中的元素使用“浮动父元素”技术，否则它就不会再居中，而是根据浮动值浮动到左边或右边了。