清除浮动的三种方式

我们简单总结下清除浮动的几种方式:

首先我们得明白,如下布局,如果不清除浮动,那将会怎样:class为one的盒子将会和父级盒子部分重合在一起,且父级盒子无法被子级撑开。那我们要清除浮动达到的效果就是:父级盒子被撑开,下面的盒子不会重叠在一起。




    
    
    


如代码上面:

方式1:在父元素盒子后面增加一个空盒子:clear:both清除浮动,浮动的影响虽然清除了,但是父盒子的高度没有办法撑开,而且还增加了没有必要的标签,

方式二:用overflow:hidden清除,这种清除的弊端是当父元素块里面的内容确实多余了父元素时,那多出的部分将会被隐藏,所以这种方式只有特定的时候才能用,比如内容不会溢出父元素。

方式三:增加伪元素,如上面所述。推荐使用这种方式

你可能感兴趣的:(css)