清除浮动产生的问题

来源：互联网发布：linux tmp 手动清理编辑：程序博客网时间：2024/06/05 15:04

前言：

发现自己到了一个需要大量知识眼界的一个阶段，虽然遇到一个bug，但自己也会百度，找到大神的王道解法，当然那一瞬间，是多么感谢大神的，虽然解决方法不是唯一的，但解决问题无疑是多么的牛叉。但想想以后遇到各种问题，就去百度去翻大神们的博客，每次场景问题解决方法有些小小的区别，自己获得始终都是获得感不足，显而易见，不是自己的东西。当然这是站在我这个菜鸟级别的阶段来谈的，大神就slide过吧。不多bb，搞得像是花里胡哨，哗众取宠，不是技术派一样，向着大神的心，前进。直接摆上今天主题。

问题描述：

布局离不开浮动流（脱离文档标准流），但同时会产生相应的问题，这会导致文档排版等或者不能达到自己预料的效果。

常见浮动产生的副作用及其影响：

1.背景不能显示（因为高度都为0了，background-color怎么铺开）
2.边框不能不能完全撑开
3.margin、padding它的css属性不能正确显示

实例，直接上图显示bug

简单场景需求：父元素包裹两个div，其中一个左浮动，另一个右浮动。

希望产生效果如图：

但实际产生的图，是这样的：

实例代码如下：

<!DOCTYPE html><html><head><title>浮动产生的问题</title><meta charset="utf-8"/><style type="text/css">*{margin:0;padding:0;}.parents{/*第一种方法 这是清除浮动方法的简单方法，设置父元素的宽高*//*width: 600px;height: 200px;*/margin:20px auto;background-color: gray; /*test color*//*border:10px solid red; */ /*test 浮动对边框的影响*/ /*第二种方法，就是在父级标签设置overflow属性，其值为hidden；zoom属性其值为1；*//*overflow: hidden;zoom:1;*/}.box1{width:250px;height: 200px;display: inline-block;float: left;font-size:0;/*清除浏览器默认的间距*/background-color: red;}.box2{width:250px;height: 200px;display: inline-block;margin-left: 50px;float: right;background-color: blue;}/*第三种方法是在父元素下添加一个块级标签，设置它的css属性：clear：both；*//*p{clear:both;}*//*第四种方法与第一种方法原理是一样的，只是采用伪元素选择器在父元素后添加块级标签并且设置clear属性的一种别样高大上的方式*//*.parents::after{content: '';display: block;clear: both;}*/</style></head><body><div class="parents"><div class="box1"></div><div class="box2"></div><!-- <p></p> --></div></body></html>

总结

常见清除浮动的方法

1.直接设置父元素的宽度和高度
2.在父元素后直接添加一个块级元素，并设置clear:both;
3.在父元素使用伪元素::after在其父元素后添加一个空的块级元素，并设置clear属性，来清除浮动
4.在父元素设置overflow:hidden;zoom:1的属性

生活寄语

爱代码，爱生活！

阅读全文

0 0