关于CSS清除浮动的几种方法

Posted 2020-07-17

如果一个父元素的所有子元素都设置了float效果，则该父元素的高度不会被撑开且颜色也不会显示。这是因为子元素设置float效果后脱离了标准的文档流，

不占据文档空间所以不能把父元素撑开。有时为了解决这个问题可以使用下面几种方法来清除浮动效果。

方法一：使用空标签

该方法就是在子元素后再添加一个空标签，空标签可以是<div>也可以是<p>等，但是要设置样式clear : both ;这样就可以达到清除浮动的效果。

方法二：给父元素设置overflow: auto;

该方法是给父元素设置样式 overflow: auto; 也可以设置为 overflow: hidden，但 overflow: visible不可以。

方法三：使用:after伪元素

该方法是利用:after和:before来在元素内部插入两个元素块，从而达到清除浮动的效果。其实现原理类似于第一种方法，区别在于前者是在html插入了一

个空的div.clear标签，而该方法是利用其伪元素:after在元素内部增加一个类似于空div的效果。下面来看看其具体的使用方法：

.outer :after {clear:both;content:‘.‘;display:block;width: 0;height: 0;visibility:hidden;}