css清除浮动导致布局错乱的3个方法

0 410 2021-05-22 20:00:02

本文目录

1. 额外标签法
2. 给父元素添加overflow属性
3. 双伪元素清除

因为浮动会导致元素脱离标准流，导致其父元素出现一些看上去比较异常的现象。所以这里是几种防止浮动导致父元素表现异常的方法。

额外标签法

其实就是在容纳浮动的容器的最后添加一个具有clear属性的块级元素，如:

<div id="main_d">
    <div id="hd_box">
        <div class="ud_b hd_b">Hi</div>
        <div class="ud_b hd_b">Hi</div>
        <div class="ud_b hd_b">Hi</div>
        <div class="ud_b hd_b">Hi</div>
        <div style="clear:both;"></div>
    </div>
</div>

其中ud_b是加了左浮动的盒子。”hd_box”中的最后一个元素指定了”clear”属性，其作用是指定一个元素是否必须移动(清除浮动后)到在它之前的浮动元素下面。

给父元素添加overflow属性

给父元素添加overflow属性，就拿上面的代码来说，在id “main_d”中添加一条”overflow:hidden”就好。
不过这个方法有个缺点，就是无法显示溢出部分。

添加after伪类元素
先定义一个类:

.clearfix{
    /* IE6, 7 only */
    *zoom: 1;
}
.clearfix::after{
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

然后把”clearfix”这个类添加给父元素。
因为after是在使用该类的元素后面加一个内容，我们又把添加的这个内容设置成了block，即块元素，并对其添加了clear属性。所以这个方法其实相当于”额外标签法”。

双伪元素清除

.clearfix{
    /* IE6, 7 only */
    *zoom: 1;
}
.clearfix::before,
.clearfix::after{
    content: "";
    display: table;
}
.clearfix::after{
    clear: both;
}

这个方法和上面那个方法类似，但是你若问我为啥display是table而不是block，我只能回答你我也不知道为啥，但是block也是能用的。然而我看的教程里写的就是table,也没有解释为什么，所以我就只能当作”block在某些情况下也许有bug”处理。

本文转自gray-ice个人博客，原文链接防止子元素浮动导致父元素变化

本文地址：https://xzo.com.cn/develop/js/976.html

有帮助，很赞！

信息来源：gray-ice

业务合作

如果您认可我们的分享，有意与我们合作开展帝国cms网站建设与开发业务或插件定制，请联系右侧在线客服。我们能给您的，就是高质量的模板与售后。

版权声明

标注了信息来源为下载鸥的文章皆为原创，如果是转载的优质文章，我们也都标注了出处。如果您喜欢我们的文章，请按照下载鸥所标注的文章出处进行标注，谢谢您的配合。

信息标签

CSS

CSS3动画：鼠标上移后颜色从中间向两边填充 css怎样让图片垂直居中帝国cms怎样将过期下架产品设为灰色 CSS3之弹性盒子布局flex（文字版） bootstrap CSS3 与 Canvas的区别 CSS实现横向滚动 animate.css在线调试，支持直接复制样式名帝国cms按钮怎样做高光划过的CSS3动画效果？ css设置单行滑动显示效果的两种方案 css清除浮动导致布局错乱的3个方法一段常用的css文件base.css CSS3 鼠标上移后底部线条从中间向两边展开一个简单的css+jQuery制作的开关样式分享一段jQuery + CSS3小窗口右侧滑入的简单代码怎样css隐藏滚动条？怎样给文字添加渐变色？ css3计数器函数counter() CSS3弹性盒子常用属性介绍 vue引入css文件的方法

导出教程下载word版教程

关于前端开发

JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。

JavaScript十分强大，不管是前端页面开发、视觉动态渲染、数据交互还是后端逻辑处理，都可以通过JS实现。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中。