清楚浮动

浮动产生的原因

当我们在一个盒子模型中使用float\:left与float\:right属性时,由于float使子元素脱离文档流导致父元素不能随子元素撑开,导致如果我们给父元素设置了背景色,边框,内外边距等属性时,这些属性不能很好的呈现出来。

解决浮动的三种方式

一.给父元素设定固定的高度

我们可以根据浮动元素的高度,给父元素设定一定的高度,不过这种方式会导致父元素不能根据子元素的内容自适应高度,不提倡使用

二.添加一个子元素,并使用clear属性

在父元素中添加一个空白子元素,并设置子元素的clear属性为both,如果浏览器要适应IE6浏览器,应该在样式中同时添加height\:0,overflow:hidden。不过该方式会添加多余的标签,同样不推荐使用

三.在父元素中添加overflow属性

在父级元素中添加overflow\:hidden属性,使父元素可以紧贴浮动的子元素,这样也可以消除浮动,该方法推荐使用.