css的浮动清除

拜拜、爱过 提交于 2019-12-01 07:01:02

比较常用的有两种方法

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,因此还得翻出以前的清除浮动的老办法
标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!