css 浮动float消除clear（深度好文）

清疚 2022-05-15 03:05 231阅读 0赞

前两天在使用float的时候，有一点难受，为什么呢，因为发现clear的清除效果不稳定，所以找了这篇博客学习一下，发现了一个重要的内容，-------clear是应用于父级元素的。这是症结所在（有点懊恼自己没好好读书导致记错了），不过，发现的这篇好文章，也是一大幸事。

原文来自： [https://blog.csdn.net/u010297791/article/details/53195603][https_blog.csdn.net_u010297791_article_details_53195603]

我们先来回忆一下float的特征：

1）块在一排显示  
       2）内联支持宽高  
       3）默认内容撑开宽度  
       4）脱离文档流  
       5）提升层级半层

由于float浮动脱离文档流，那么就很容易产生各种兼容性和由于浮动产生的视觉效果上的差别。接下来我们分析几种主要的解决方法。大家最熟悉的方法应该就是添加空标签，然后利用clear来清除浮动，其实方法很多，但是不是每种都适合我们所遇到的情况，也不是每种都能很好的兼容所有浏览器，所以需要选择适当的方法去解决这个由于浮动所产生的问题。

**一、下面几个是计较传统的几种清浮动的方法，但是在目前的使用中还是有些问题**

**     1、加高度 (扩展性不好)**

如果是通过加高度进行清浮动的话，那么就意味着在设计的过程中，高度是固定的，这样就无法自适应那些需要自适应高度的情况，扩展性不好。

比如：

1.  `<!DOCTYPE html>`
2.  `<html>`
3.  `<head>`
4.  `<meta charset="utf-8">`
5.  `<title></title>`
6.  `<style>`
7.  `.box{`
8.  `border: 1px solid red;`
9.  `}`
10. `.item{`
11. `width: 200px;`
12. `height: 200px;`
13. `background-color: green;`
14. `float: left;`
15. `}`
16. `</style>`
17. `</head>`
18. `<body>`
19. `<div class="box">`
20. `<div class="item"></div>`
21. `</div>`
22. `</body>`
23. `</html>`

显示结果如下，外面的div无法包住里面的div，如果通过给外面的div添加高度的话，就意味着里面的内容无法自适应高度，这样的话，扩展性不好。

![SouthEast][]

**2、给父级加浮动 (页面中所有元素都加浮动，margin左右自动失效（floats bad ！）)  
      3 、.inline-block 清浮动方法 (margin左右auto失效)  
      4、空标签清除浮动 (IE6 最小高度 19px；（解决后IE6下还有2px偏差）)  
      5、.br清浮动 (不符合工作中：结构、样式、行为，三者分离的要求)**

即添加下面这条语句在里面的div后面：<br clear="all" />

**二、目前常用的三种清浮动方法，也是比较有效的方法**

先抛一块问题砖（display： block）：

![SouthEast 1][]

1.  `<!DOCTYPE html>`
2.  `<html lang="en">`
3.  `<head>`
4.  `<meta charset="UTF-8">`
5.  `<title>Title</title>`
6.  `<style>`
7.  `.box{`
8.  `border: 1px solid #ccc;`
9.  `background: #c2ffe3;`
10. `color: #fff;`
11. `margin: 50px auto;`
12. `padding: 50px;`
13. `}`
14. `.div1{`
15. `width: 80px;`
16. `height: 80px;`
17. `background: red;`
18. `float: left;`
19. `}`
20. `.div2{`
21. `width: 80px;`
22. `height: 80px;`
23. `background: blue;`
24. `float: left;`
25. `}`
26. `.div3{`
27. `width: 80px;`
28. `height: 80px;`
29. `background: sienna;`
30. `float: left;`
31. `}`
32. `</style>`
33. `</head>`
34. `<body>`
35. `<div class="box">`
36. `<div class="div1">1</div>`
37. `<div class="div2">2</div>`
38. `<div class="div3">3</div>`
39. `</div>`
40. `</body>`
41. `</html>`

我们本意是想让三个div靠左显示，并且是在第一个div中，但是现在的效果是边框没有被撑开，margin值不能正常显示。所以可以采用以下几种方法进行解决。

**1、添加新的元素 、应用 clear：both；**

html：

1.  `<div class="box">`
2.  `<div class="div1">1</div>`
3.  `<div class="div2">2</div>`
4.  `<div class="div3">3</div>`
5.  `<div class="clear"></div>`
6.  `</div>`

css:

.clear{clear:both; height: 0; line-height: 0; font-size: 0}

**2、父级div定义 overflow: auto/hidden（注意：是父级div也就是这里的  div.box）**

1.  `.box{`
2.  `border: 1px solid #ccc;`
3.  `background: #c2ffe3;`
4.  `color: #fff;`
5.  `margin: 50px auto;`
6.  `padding: 50px;`
7.  `overflow: auto;`
8.  `zoom: 1;//zoom 兼容IE6 IE7，处理兼容性问题`
9.  `}`

原理：使用overflow属性来清除浮动有一点需要注意，overflow属性共有三个属性值：hidden,auto,visible。我们可以使用hiddent和auto值来清除浮动，但切记不能使用visible值，如果使用这个值将无法达到清除浮动效果，其他两个值都可以，其区别据说在于一个对seo比较友好，另个hidden对seo不是太友好。

**3、据说是现在主流的方法  :after 方法：（注意：作用于浮动元素的父亲）**  
       原理：这种方法清除浮动是现在网上最拉风的一种清除浮动，他就是利用:after和:before来在元素内部插入两个元素块，从面达到清除浮动的效果。其实现原理类似于clear:both方法，只是区别在于:clear在html插入一个div.clear标签，而box利用其伪类clear:after在元素内部增加一个类似于div.clear的效果。

html:

1.  `<div class="box clearfix">`
2.  `<div class="div1">1</div>`
3.  `<div class="div2">2</div>`
4.  `<div class="div3">3</div>`
5.  `</div>`

css：

1.  `.clearfix{`
2.  `*zoom:1;`
3.  `}`
4.  `.clearfix:after{`
5.  `content: "";`
6.  `display: block;`
7.  `clear: both;`
8.  `}`

1）after伪类： 元素内部末尾添加内容；  
                        :after\{content"添加的内容";\} IE6，7下不兼容  
2）zoom 缩放   
         a、触发 IE下 haslayout，使元素根据自身内容计算宽高。  
         b、FF 不支持；

其中clear:both;指清除所有浮动；content: '.'; display:block;对于FF/chrome/opera/IE8不能缺少，其中content（）可以取值也可以为空。visibility:hidden;的作用是允许浏览器渲染它，但是不显示出来，这样才能实现清楚浮动。

最终的效果图：

![SouthEast 2][]

[https_blog.csdn.net_u010297791_article_details_53195603]: https://blog.csdn.net/u010297791/article/details/53195603
[SouthEast]: /images/20220515/bd3994c68c104c0f970cd3bb9f9b2c98.png
[SouthEast 1]: /images/20220515/2e1f9ecb4a9e46ec80020a42d02d0def.png
[SouthEast 2]: /images/20220515/e98ab64235ab4a2fab6cee283bc6f627.png