CSS学习12--清除浮动的本质及处理办法

本文主要是介绍CSS学习12--清除浮动的本质及处理办法，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

清除浮动

前言
一、清除浮动的本质
二、清除浮动的方法

前言

为什么要清除浮动？
浮动不占用原文档流的位置，可能会对后面的元素排版产生影响。因此需要在该元素中清除浮动，清除浮动后造成的影响。

一、清除浮动的本质

为了解决父级元素因为子级元素引起内部高度为0的问题。

<html><head><style>* {padding: 0;margin: 0;}.box1 {width: 960px;/*height: 100px;*/background-color: red;}.box2 {width: 960px;height: 200px;background-color: purple;}.son1 {width: 150px;height: 100px;background-color: skyblue;float: left;}.son2 {width: 150px;height: 100px;background-color: pink;float: left;}</style></head><body><div class="box1"><div class="son1"></div><div class="son2"></div></div><div class="box2"></div></body>
</html>

父级元素不定义高度是因为不知道盒子里面的内容有多少。
如果son1和son2都浮动了，父级元素没有高度，则会产生重叠。

二、清除浮动的方法

实际上叫做闭合浮动更好，清除浮动是把浮动的盒子圈到里面，让父盒子闭合出口和入口不让他们出来影响其他元素。
在CSS中，clear属性用于清除浮动，基本语法格式：

left
right
both 同时清除左右两侧浮动的影响

额外标签法

在浮动盒子的后面添加一个空盒子。

<div style="clear:both"></div>

优点：通俗易懂，书写方便
缺点：添加许多无意义标签，结构化较差，

<html><head><style>* {padding: 0;margin: 0;}.box1 {width: 960px;/*height: 100px;*/background-color: red;}.box2 {width: 960px;height: 200px;background-color: purple;}.son1 {width: 150px;height: 100px;background-color: skyblue;float: left;}.son2 {width: 150px;height: 100px;background-color: pink;float: left;}.clear {clear: both;}</style></head><body><div class="box1"><div class="son1"></div><div class="son2"></div><div class="clear"></div></div><div class="box2"></div></body>
</html>

父级添加overflow方法

给父级添加：overflow为hidden|auto|scroll都可以实现。

优点：代码简洁
缺点：内容增多时容易造成不会自动换行导致内容被隐藏，无法显示需要溢出的元素。

<html><head><style>* {padding: 0;margin: 0;}.box1 {width: 960px;/*height: 100px;*/background-color: red;overflow: hidden; /*触发BFC 清除浮动*/}.box2 {width: 960px;height: 200px;background-color: purple;}.son1 {width: 150px;height: 100px;background-color: skyblue;float: left;}.son2 {width: 150px;height: 100px;background-color: pink;float: left;}</style></head><body><div class="box1"><div class="son1"></div><div class="son2"></div></div><div class="box2"></div></body>
</html>

使用after伪元素清除浮动

:after方式为空元素的升级版，好处是不用单独加标签了

.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden;}
.clearfix { *zoom: 1; /**代表ie6.7能识别的*/}

优点：符合闭合浮动思想，结构语义化正确
缺点：由于IE6-7不支持：after，使用zoom：1触发hasLayout。
代表网站：百度、网易、淘宝等

<html><head><style>* {padding: 0;margin: 0;}.box1 {width: 960px;/*height: 100px;*/background-color: red;}.box2 {width: 960px;height: 200px;background-color: purple;}.son1 {width: 150px;height: 100px;background-color: skyblue;float: left;}.son2 {width: 150px;height: 100px;background-color: pink;float: left;}p::after {content: "456";}.clearfix:after { /*:可以*/content: "."; /*内容为小点，尽量加不要空，否则旧版本浏览器有空隙*/display: block; /*转换为块级元素*/height: 0; /*高度为0*/visibility: hidden; /*隐藏盒子*/clear: both;}.clearfix { *zoom: 1; /**代表ie6.7能识别的*/}</style></head><body><p>123</p><div class="box1 clearfix"><div class="son1"></div><div class="son2"></div></div><div class="box2"></div></body>
</html>

使用双伪元素清除浮动

.clearfix:before, .clearfix:after { content: ""; display: table;}
.clearfix:after { clear: both;}
.clearfix { *zoom: 1; /**代表ie6.7能识别的*/}

优点：代码更简洁
缺点：由于IE6-7不支持：after，使用zoom：1触发hasLayout。
代表网站：小米、腾讯等

<html><head><style>* {padding: 0;margin: 0;}.box1 {width: 960px;/*height: 100px;*/background-color: red;}.box2 {width: 960px;height: 200px;background-color: purple;}.son1 {width: 150px;height: 100px;background-color: skyblue;float: left;}.son2 {width: 150px;height: 100px;background-color: pink;float: left;}p::after {content: "456";}.clearfix:before,.clearfix:after { /*:可以*/content: ""; /*内容为空*/display: table; /*触发bfc 防止外边距合并*/}.clearfix::after {clear: both;}.clearfix { *zoom: 1; /**代表ie6.7能识别的*/}</style></head><body><p>123</p><div class="box1 clearfix"><div class="son1"></div><div class="son2"></div></div><div class="box2"></div></body>
</html>