清除浮动4种方法

最新推荐文章于 2023-09-07 00:04:48 发布

万希&

最新推荐文章于 2023-09-07 00:04:48 发布

阅读量98

点赞数 1

分类专栏：前端文章标签：前端 css html javascript 面试

本文链接：https://blog.csdn.net/weixin_46015250/article/details/126397738

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

清除浮动

额外标签法

 .clear{ clear:both;}
        <div class="fahter">
         <div class="big">big</div>
         <div class="small">small</div>
         <div class="clear">额外标签法</div>   </div>

父级添加overflow方法：本质BFC特性传送门

.fahter{
    width: 400px;
    border: 1px solid deeppink;
    overflow: hidden;
}

使用after伪元素清除浮动

.clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
        content: "";
        display: block;
        height: 0;
        clear:both;
        visibility: hidden;
    }
    .clearfix{
        *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
    }
 
<body>
    <div class="father clearfix">
        <div class="big">big</div>
        <div class="small">small</div>
        <!--<div class="clear">额外标签法</div>-->
    </div>
    <div class="footer"></div>
</body>

clear样式

只能清除前面元素浮动，后面元素加clear属性

代码就是要多敲，才会有收获。如果对你有帮助，帮忙点个小👍哈

优惠劵

万希&

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
清除浮动4种方法

清除浮动
复制链接

扫一扫

专栏目录

CSS清除浮动方法小结

09-24

本文主要介绍了CSS解决浮动，清除浮动的几种方法：1、设置父元素高度；2、overflow；3、增加子元素（块级），并且设置其clear属性值为both来解决（隔墙法、内墙法）；4、使用after或before伪对象清除浮动。下面跟着...

CSS清除浮动的五种方法(超详细)

前端开发,HTML5,css3,JavaScript,node.js,vue

11-23

1万+

浮动的原理是让图片脱离文档流，直接浮在桌面上。我们一般布局的时候都是只设置宽度不设置高度，让内容来自动填充高度。但使用浮动后会让原本填充的高度消失，父元素高度为0，后续添加内容布局会产生混乱,造成高度塌陷,这时候就可以利用清除浮动来解决父元素高度塌陷的问题。解决方法一(clear),解决方法二(overflow:hidden),解决方法三(给父元素添加高度),解决方法四(额外标签法),解决方法五(使用after伪元素清除浮动)

参与评论您还未登录，请先登录后发表或查看评论

CSS清除浮动五种方式详解

wshwsh_的博客

07-27

1461

由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响，为了解决这些问题，此时就需要在该元素中清除浮动。

css清除浮动的几种方式

潮汐未见潮落的博客

05-30

1万+

CSS 清除浮动的几种常用方法

css清除浮动的六种方法

m0_45884629的博客

02-22

3223

css中使用float属性时会造成局部坍塌或者内容上顶以及文字环绕等一系列情况出现。总结了一共六种方法其中有两种最为常用： 1、height属性给父元素设置固定高度当父元素下的子元素进行了浮动时，我们可以给父元素设置固定的高度让父元素的高度高于子元素。缺点：父元素的高度是固定的当子元素的高度变化需要修改父元素比较麻烦。适用点：父子元素的高度都是固定的时候。 2、clear元素 css中有clear元素属性有三个 right清除右浮动 left清除左浮动 both清除所有浮动 clear可以清除浮动

【css中清除浮动的方式有哪些？】

weixin_52369825的博客

07-17

480

3、使用overflow属性清除浮动：将父元素的“overflow” 属性设置为`hidden`或者`auto`，可以触发BFC（块级格式化上下文）机制，从而包含浮动元素.1、使用空div清除浮动：在浮动元素的末尾添加一个空的`div`元素，并给其设置`clear:both`样式。这样可以强制将浮动元素后的内容放置在下方，从而清除浮动。4、使用 display：flow-root 清除浮动：将父元素的 display 属性设置为 flow-root ，可以创建一个新的BFC，从而清除浮动。

CSS3 清除浮动的方法示例

12-14

4、回答，如何清除浮动以及常用的几种方法 5、结论，得出本文认为最好用的方法三、正文 1、浮动本来的意义浮动的意义原本仅是用来让文字环绕在图片周围而已。通过上图可以看到，设置图片左浮动可以将图片从...

div清除浮动css样式代码分享(4种方法)

09-25

清除浮动这个问题，做前端的应该再熟悉不过了，下面介绍4种方法给大家参考

关于清除浮动塌陷的几种方法总结

12-11

浮动的的元素有4点特性：1.浮动元素会脱离标准文档流，已经不区分快和行了。 2.浮动的元素会互相贴靠。 3.浮动的元素有“字围”的效果。 4.收缩。一个浮动的元素，如果没有设置width，那么将自动收缩为文字的宽度。 ...

CSS清除浮动的四种方法

m0_74001959的博客

08-04

391

CSS清除浮动的四种方法

CSS清除浮动float的三种方法小结

09-24

使元素脱离文档流，按照指定方向发生移动，遇到父级边界或者相邻的浮动元素停了下来。本文给大家带来了CSS清除浮动float的三种方法小结，感兴趣的朋友跟随脚本之家小编一起看看吧

CSS清除浮动_清除float浮动 - DIVCSS5.htm

08-01

具体详细的阐述了css浮动如何解决和浮动产生的原因。

css清除浮动的四种方法(详细)

最新发布

2201_75935630的博客

09-07

185

父元素没有设置高度，父元素内的子元素设置了浮动。1.在父级元素内容的最后添加一个块级元素。这样就会影响到后面的标准流元素。2.在添加的块级元素设置属性。父级元素是不能设置高度的。而子级元素又需要设置浮动。

清除浮动

前端入门神器

03-10

339

清除浮动的四种方式及其原理理解本文介绍了四种清除浮动的方法，并尝试解释其原理。在理解了各种清除浮动的原理之后，你会发现，很多清除浮动的方法本质上其实是一样的。掌握这些原理，相信你可以根据场景和需求，灵活运用原则发展出不同的清除浮动的方法，而不再死记或拘泥于文中提到的方法。一、为什么要清除浮动在讲清除浮动的方法之前，我们先来了解一下为什么要清除浮动，清除浮动的目的是什么，即，要解决什么样的问题...

CSS清除浮动的方法（多种）

qq_63108921的博客

04-24

4414

清除浮动的含义是什么？清除浮动带来的影响影响：如果子元素浮动了，此时子元素不能撑开父元素 ➢ 清除浮动的目的是什么？需要父元素有高度，从而不影响其他网页元素的布局注意：父子级标签, 子级浮动, 父级没有高度, 后面的标准流盒子会受影响, 显示到上面的位置 clear:both;/* 清除左右两侧浮动的影响 */ 方法： 1、直接设置父元素高度优点：简单粗暴，方便缺点：有些布局中不能固定父元素高度。如：新闻列表、京东推荐模块 2、额外标签法操.

bootstrap清除浮动

09-06

在Bootstrap中，清除浮动有几种方法可以实现。其中一种方法是使用clearfix类。通过为父级元素添加clearfix类，可以很容易地清除内部的浮动。你可以在父级元素的class属性中添加clearfix类，如下所示： ```html <!...

“相关推荐”对你有帮助么？

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交