css的浮动清除

标签：没有   overflow   相对   两种   伪类   round   after   补充   ref   

比较常用的有两种方法

overflow

在父元素内使用overflow：hidden属性，来清除子元素浮动

没有使用overflow：hidden时：

蓝色为ul，因为粉色的li浮动了，蓝色ul失去粉色li撑起的高度，因此缩了上去

使用overflow：hidden时：

伪类:after

这是一种更加常用的方法，可以给父元素添加伪类来清除浮动。但这里有更好的方法，

直接定义一个伪类添加给父元素。这里参照了bilibili的clearfix类

这个原理其实是利用了一个空标签使用clear：both来清除浮动。伪类：after最终会加载一个标签在元素内部的最后位置，当然你也可以直接在父类上定义：after伪类。

eq：

补充：起初自己认为这种方法清除浮动不是很必要，因为现在不太用float来进行页面布局，

现在基本使用的是flax属性布局。但考虑到元素进行相对定位或者决对定位之后，若要进行内部布

局任旧会使用到float，因此还得翻出以前的清除浮动的老办法

css的浮动清除

标签：没有   overflow   相对   两种   伪类   round   after   补充   ref   

原文地址：https://www.cnblogs.com/chujunqiao/p/11665872.html