众所周知,CSS中的定位机制分为,文档流,浮动和绝对定位。(今天不谈绝对定位),如果对元素没有进行任何定位处理的话,元素应该处于文档流中,当我们对元素进行了浮动(float)时,我们的元素就会脱离文档流,像一只小船一样漂流在文档之上。首先来看一下浮动会带来哪些result.
第一:先看代码
效果:
result :1、父盒子的margin受到影响,无法实现左右居中,
2、我没有给父盒子设置高度,浮动后父盒子的高度没有被撑开,图片中撑开的高度是padding带来的效果。
接下来我们再进行一个有趣的操作,添加一个div块类名为d,并且我们不对他进行浮动,这时候你会发现:
div:d竟然跑到了div:a的下面。那么此时我们就需要进行清除浮动了。
第二:清除浮动的方法
方法1、 在浮动元素的最后面添加一个新元素,应用clear:both.(clear:left是清除左浮动,clear:right是清除有浮动。为了方便,一般我们都是使用clear:both)
代码如下:
效果:
注:也可以直接在div:d上添加clear:both,效果一样。
方法2、浮动元素的父元素使用overflow:auto;zoom是为了处理兼容问题添加。
注意:使用overflow属性来清除浮动有一点需要注意,overflow属性共有三个属性值:hidden,auto,visible。我们可以使用hiddent和auto值来清除浮动,但切记不能使用visible值,如果使用这个值将无法达到清除浮动效果,其他两个值都可以,其据说在于一个对seo比较友好,另一个hidden对seo不是太友好。
方法3、使用伪类:after,:before,同样是对浮动元素的父元素添加,此方法也是我最喜欢的方法
其中clear:both;指清除所有浮动;content: '.'; display:block;对于FF/chrome/opera/IE8不能缺少。