css的浮动清除

比较常用的有两种方法

overflow

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

没有使用overflow:hidden时:

image

image

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

使用overflow:hidden时:

image

伪类:after

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

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

image

image

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

eq:

image

补充:起初自己认为这种方法清除浮动不是很必要,因为现在不太用float来进行页面布局,
现在基本使用的是flax属性布局。但考虑到元素进行相对定位或者决对定位之后,若要进行内部布
局任旧会使用到float,因此还得翻出以前的清除浮动的老办法
posted @ 2019-10-13 12:16  阴阳师先生  阅读(165)  评论(0)    收藏  举报