CSS篇(004)-CSS 清除浮动的几种方法

智码踏星使
• 阅读 2709

答案:

清除浮动: 核心: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_/
}

参与互动

点赞
收藏
评论区
推荐文章
Wesley13 Wesley13
3年前
CSS
在各种浏览器中显示效果也有可能不相同,这样让清除浮动更难了,下面总结8种清除浮动的方法,测试已通过iechromefirefoxopera,需要的朋友可以参考下清除浮动是每一个web前台设计师必须掌握的机能。css清除浮动大全,共8种方法。 浮动会使当前标签产生向上浮的效果,同时会影响到前后标签、父级标签的位置及widthhei
Wesley13 Wesley13
3年前
.clear 万能清除浮动
htmlbodydiv.clear,htmlbodyspan.clear{background:none;border:0;clear:both;display:block;float:none;
Wesley13 Wesley13
3年前
BFC清除浮动
BFC就是清除浮动用来处理文档脱离文档流的问题清除浮动的方法:a、父元素也添加一个浮动    产生弊端就是:margin不能使用b、给父元素添加一个:display:inlineblock     弊端同a一样:无法使用marginc、给父元素添加高     
Wesley13 Wesley13
3年前
CSS 清除浮动的4种方法
1\.为什么要清除浮动因为父级盒子很多情况下,不方便给高度,但是子盒子浮动就不占有位置,最后父级盒子高度为0,就影响了下面的标准流盒子。!在这里插入图片描述(https://imgblog.csdnimg.cn/20201111221816518.pngpic_center)
Wesley13 Wesley13
3年前
CSS中清除浮动的作用以及如何清除浮动
1.什么是浮动,浮动的作用“浮动”从字面上来理解就是“悬浮移动、非固定”的意思。块级元素(div、table、span…)是以垂直方向排列,而在前端界面中往往要使用水平布局块级元素使界面更美观。这就要用到浮动了。被设置浮动的元素会脱离标准流(竖直排列),从而达到水平排列的效果。例如.未设置浮动时图1中的两张图片竖直排列在父级元素(橙色区域)
Wesley13 Wesley13
3年前
CSS浮动和清除浮动
1.浮动float  div配合float浮动来做页面的布局,浮动最常用的地方就是用来做布局。只有一个标签设置了浮动float属性,就会变成块级标签。!(https://img2018.cnblogs.com/blog/1468469/201901/1468469201901061724118811574074745.png)<!
Wesley13 Wesley13
3年前
CSS清除浮动大全共8种方法
在各种浏览器中显示效果也有可能不相同,这样让清除浮动更难了,下面总结8种清除浮动的方法,测试已通过iechromefirefoxopera,需要的朋友可以参考下清除浮动是每一个web前台设计师必须掌握的机能。css清除浮动大全,共8种方法。浮动会使当前标签产生向上浮的效果,同时会影响到前后标签、父级标签的位置及widthheig
Stella981 Stella981
3年前
CSS之清除浮动 && float属性
DIV层内的元素在使用了float属性后无法自动改变高度的解决办法:有的时候为了让外侧层根据内容自动调整,没有设置高度或宽度,一般都会正常显示。但如果层内元素使用了float属性,就会使那些元素脱离文件流,就无法再扩充容器层,就会导致外层大小无法根据内容自动调整。关于这个问题,总结出以几种在当下几种主流浏览器都兼容的方法,供大家参考。1.清除浮动在层
Wesley13 Wesley13
3年前
CSS清除浮动的4种方式
1、使用空标签清除浮动。我用了很久的一种方法,空标签可以是div标签,也可以是P标签。这种方式是在需要清除浮动的父级元素内部的所有浮动元素后添加这样一个标签清除浮动,并为其定义CSS代码:clear:both。此方法的弊端在于增加了无意义的结构元素。2、使用overflow属性。此方法有效地解决了通过空标签元素清除浮动而不得不增加无意代码的弊端。使用
Wesley13 Wesley13
3年前
CSS 清除浮动 伪类
参考链接:https://www.cnblogs.com/yingsu/p/7261904.html不清楚浮动的结果和影响不再描述,清除浮动的代码别处也有很多,每种方法都有十分简洁的代码,我今天学到的是有伪类来清除浮动。他的原理简单来说就是再已经浮动的元素后面添加一个什么也没有的元素,以此来消除子元素因为浮动而让父元素塌陷的一种解决办法。
Wesley13 Wesley13
3年前
CSS复习笔记二:浮动和清除浮动
 一、浮动的性质1、浮动的元素脱离标准文档流,并且可以设置宽度和高度。2、浮动的元素相互贴靠3、浮动的元素有“文字环绕”效果       含有图片的div浮动,段落不浮动,文字会环绕图片。4、div浮动了且没有设置宽度,那么将自动收缩为内容的宽度。浮动(脱标)的元素是不能把容器惩处高度的。二、浮动的清除
智码踏星使
智码踏星使
Lv1
未曾青梅,青梅枯萎,芬芳满地。
文章
5
粉丝
0
获赞
0