四种清浮方法

时间：2023-03-30 14:21:58 CSS

下面介绍四种清除浮动的方法。我们先来看一段代码。css.box{border:1pxsolid#f00;}.fl{float:left;宽度：50px；高度：50px；背景：#0f0；边距：5px;}html

下面的结果是因为没有清除float，子元素没有展开父元素，出现了上面的情况。以下是几种清除浮动的方法1.额外标签法在最后一个浮动标签后，添加一个新标签并设置clear:both;（不推荐）css.box{border:1pxsolid#f00;}.fl{float:left;宽度：50px；高度：50px；背景：#0f0；margin:5px;}.clearfix{clear:both;}html效果展示2.使用after伪元素清除float.clearfix:after{display:block;明确：两者；内容：'';visibility:hidden;}.clearfix{*zoom:1;}3.使用前后双伪元素清除float.clearfix：之后，.clearfix:before{内容：“”；display:table;}.clearfix:after{clear:both;}.clearfix{*zoom:1;}4.BFC方法?不知道BFC对我另一个的引用这是一个重要的概念css.box{border:1pxsolid#f00;}.fl{浮动：左；宽度：50px；高度：50px；背景：#0f0；margin:5px;}.clearfix{//触发BFC，以下任何一个溢出：hidden;/*溢出：自动；*//*位置：绝对；*//*位置：固定；*//*显示：表格；*//*显示：弹性；*/}html使用clearfix作为全局使用的类名，这样在项目中到处使用clearfloat就很方便了~~~~参考https://blog.csdn.net/h_qingy...

上一篇：VueX状态管理器的应用

下一篇：六种自适应两栏布局方法

四种清浮方法相关文章