开发者社区> 问答> 正文

CSS 清除浮动的几种方法(至少两种)

CSS 清除浮动的几种方法(至少两种)

展开
收起
茶什i 2019-11-18 14:35:15 1241 0
1 条回答
写回答
取消 提交回答
  • 清除浮动: 核心:clear:both;

    1.使用额外标签法(不推荐使用)

    在浮动的盒子下面再放一个标签,使用 clear:both;来清除浮动

    a 内部标签:会将父盒子的高度重新撑开

    b 外部标签:只能将浮动盒子的影响清除,但是不会撑开盒子

    2.使用 overflow 清除浮动(不推荐使用)

    先找到浮动盒子的父元素,给父元素添加一个属性:overflow:hidden;就会清除子元素对页面的影响

    3.使用伪元素清除浮动(用的最多)

    伪元素:在页面上不存在的元素,但是可以通过 css 添加上去

    种类: :after(在。。。之后) :before(在。。。之前)

    注意:每个元素都有自己的伪元素

    .clearfix:after { content:""; height:0; line-height:0; display:block; clear:both; visibility:hidden; /将元素隐藏起来/ 在页面的 clearfix 元素后面添加了一个空的块级元素 (这个元素的高为 0 行高也为 0 并且这个元素清除了浮动) } .clearfix { zoom:1;/为了兼容 IE6/ }

    2019-11-18 14:35:30
    赞同 展开评论 打赏
问答排行榜
最热
最新

相关电子书

更多
零基础CSS入门教程 立即下载
低代码开发师(初级)实战教程 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载