浅谈 CSS 清除浮动的 6 种方法

WalkerXu 发布于2019-08-28 18:20 / 2838人阅读

摘要：如果要解决可以参考前面的办法。例如父元素处于绝对定位与上一个方法同理，由于绝对定位已脱离正常文档流，故出现相同情况，解决办法依旧可以使用以上办法结合，灵活多变。

额外标签法

使用:after 伪元素

给父元素定高

利用overflow:hidden;属性

父元素浮动

父元素处于绝对定位

在开发网页的时候经常需要用到各种浮动，此时便需要及时的清除浮动，否则将会导致布局出现问题

引出问题：

可以看出本应包住3个 inner DIV的 outer DIV 却没有包住他们，此刻只剩一条由上下边框贴合组成的线，同时 footer DIV元素也跑到了三个浮动元素的底下

解决办法：

1. 使用额外标签法

这是早期普遍使用的方法，但是对于有代码洁癖的人来说，解决的不够完美

2. 使用 :after 为元素

3. 给父元素定高

4. 利用 overflow:hidden 属性

5. 父元素浮动

当父元素浮动的时候，无需为子元素的浮动清除浮动,布局时经常用到

可以看出虽然 outer DIV 消除了塌陷现象，但由于其也发生了浮动故，其后元素若处于正常文档流，会被跌在底下。

如果要解决可以参考前面的办法。

例如：

6. 父元素处于绝对定位

与上一个方法同理，由于绝对定位已脱离正常文档流，故出现相同情况，解决办法依旧可以使用以上办法结合，灵活多变。

GPU服务器海外云主机的清除方法清除浮动在家赚钱的十种方法数据迁移的四种方法

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111185.html

浅谈 CSS 中的伪类 after

摘要：而不会因为高度塌陷而被隐藏在内部浮动的子元素下。若果不考虑的高度塌陷问题，直接在其弟元素处设置属性即可。开始我误认为了是将中的内容插入至被选元素的弟元素位置上。中的示例从这个示例可以看出，伪类内容的默认方式应该为内联。 1. 引子前段时间学习 web 布局的时候，因为要用浮动 float 属性，所以就顺理成章地碰到了清除浮动 clear 属性。教学的案例中是用新建一个空的 div ...

shinezejian 2019-08-28 18:07 评论0 收藏0
2018 浅谈前端面试那些事

摘要：声明的变量不得改变值，这意味着，一旦声明变量，就必须立即初始化，不能留到以后赋值。虽然今年没有换工作的打算但为了跟上时代的脚步还是忍不住整理了一份最新前端知识点知识点汇总 1.HTML HTML5新特性，语义化浏览器的标准模式和怪异模式xhtml和html的区别使用data-的好处meta标签canvasHTML废弃的标签IE6 bug，和一些定位写法css js放置位置和原因...

LiuRhoRamen 2019-08-30 14:11 评论0 收藏0
2018 浅谈前端面试那些事

摘要：声明的变量不得改变值，这意味着，一旦声明变量，就必须立即初始化，不能留到以后赋值。虽然今年没有换工作的打算但为了跟上时代的脚步还是忍不住整理了一份最新前端知识点知识点汇总 1.HTML HTML5新特性，语义化浏览器的标准模式和怪异模式xhtml和html的区别使用data-的好处meta标签canvasHTML废弃的标签IE6 bug，和一些定位写法css js放置位置和原因...

stormgens 2019-08-22 15:34 评论0 收藏0
2018 浅谈前端面试那些事

摘要：声明的变量不得改变值，这意味着，一旦声明变量，就必须立即初始化，不能留到以后赋值。虽然今年没有换工作的打算但为了跟上时代的脚步还是忍不住整理了一份最新前端知识点知识点汇总 1.HTML HTML5新特性，语义化浏览器的标准模式和怪异模式xhtml和html的区别使用data-的好处meta标签canvasHTML废弃的标签IE6 bug，和一些定位写法css js放置位置和原因...

Hujiawei 2019-08-01 18:43 评论0 收藏0
浅谈面试中常考的两种经典布局——圣杯与双飞翼

摘要：圣杯和双飞翼布局介绍最近正好碰到了写这种布局，一直没有总结过正好借这次机会总结一波，同时加强一下自己的理解。使用双飞翼布局就可以避免这个问题。双飞翼布局则是中间栏不变，将内容部分为两边腾开位置参考圣杯和双飞翼布局介绍 showImg(http://www.xluos.com/usr/uploads/2018/02/990972879.png);最近正好碰到了写这种布局，一直没有总结过...

SwordFly 2019-08-30 13:58 评论0 收藏0