清除浮动大全+我对其原理的理解

最新推荐文章于 2019-05-14 20:17:42 发布

读着对白

最新推荐文章于 2019-05-14 20:17:42 发布

阅读量269

点赞数 2

分类专栏： html+css 文章标签：浮动清除浮动 float clearboth css html

本文链接：https://blog.csdn.net/luoxuehui_blog/article/details/79053337

版权

html+css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

总结css解决清除浮动

float:left; 浮动，对一个标签进行使用后，会使得这个标签脱离文档流，也就是
产生上浮效果，不占据文档中的位置。(浮动核心就一句话：浮动元素会脱离文档
流并向左/向右浮动，直到碰到父元素或者另一个浮动元素。)

浮动的三个特点很重要。

1. 脱离文档流。
2. 向左/向右浮动直到遇到父元素或者别的浮动元素。
3. 浮动会导致父元素高度坍塌。
(解决父元素高度坍塌的方式就是清除浮动，常规的方法是clear清除浮动和BFC清除浮动,这两个方式不多说，想了解的去网上查资料吧)
4. 定义了浮动属性后，如果该元素是行级标签的话，该元素可以直接定义宽高了，不需要再定义diaplay:blcok;
所以，在做项目的时候，清除浮动是我们常遇到的问题。

下面是总结了几种清除浮动的主流或不常用的方法:

清除了浮动了的未清除浮动的

大家可以看到，我的父区域时红色区域，但是在第二张图片没有出现，这就是浮动会导致父元素高度坍塌，使得父元素显示不出来。

1.给父级标签定义高
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动</title>
<style>
.a1{width: 300px;background:#f00;}
.left{float:left;width: 100px;height: 300px;background:#0ff;}
.right{float:right;width: 100px;height: 300px;background:#f0f;}
</style>
</head>
<body>
<div class="a1">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>

原理:父级div自己定义hieght，里面的元素有没有都无所谓。(在里面元素都浮动的时候，可以将父级标签内部看成是空的)如果没有定义宽的话，上面说了，子标签的宽会继承父标签的宽，如果没有父标签的话，那就是整个body的宽，所以有时我们都不定义宽，而让他继承父级。

优点: 简单，兼容性好

缺点: 在我们做响应式布局的时候会很难搞，因为如果你要在里面加点内容怎么办，又要去该宽高吗？太麻烦了。如果父级不定义宽高，而让子级内容撑开，或者解决浮动问题那该多好啊。这样不管我里面加多少新内容，都不需要修改父级。

建议: 不建议使用,在高度固定的时候还是可以使用的

2.在父标签的结尾处加一个毫无意义的div标签给标签定义上clear:both;
代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动</title>
<style>
.a1{width: 300px;background:#f00;}
.left{float:left;width: 100px;height: 300px;background:#0ff;}
.right{float:right;width: 100px;height: 300px;background:#f0f;}
</style>
</head>
<body>
<div class="a1">
<div class="left"></div>
<div class="right"></div>
<div style="clear:both;"></div>
</div>
</body>
</html>

原理: 加一个毫无意义的标签，在给它加一个clear:both;属性。我来解释下这个属性：

clear属性规定元素的哪一侧不允许其他浮动元素。有left,right,both,none,inherit;

left在左侧不允许浮动元素right在右侧不允许浮动元素both在左右两侧均不允许浮动元素，

none默认值,允许浮动元素出现在两侧,

inherit规定应该从父元素继承clear属性的值。
a1这个div本来可以不加width的，他的width会继承父级的，可是父级是body就会铺满整个屏幕，所以加了个width约束他。
在父标签对的结尾处也可以不加div,只要是块级标签都可以，如果是行内标签的话就要将他变成快(display:block;)

优点:简单，兼容性好

缺点:都说过在一个页面中整个浮动会经常的使用，那的加多少标签啊，我么那些代码的目标是尽量减少代码的量，你倒好，增加了这么多代码量

建议：不推荐使用，但此方法是以前主要使用的一种清除浮动方法，也就是说现在有更好的方法解决这问题，在下面呢，别急。
(2.1除了加一个标签，还可以加一个<br style="clear:both;"，按理来说br是个行级标签，但的确能用，不需要加display:block;但是br属于不好控制的一种标签，所以慎用!>

3.父级div定义伪类:after 和 zoom

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动</title>
<style>
.a1{width: 300px;background:#f00;}
.clearFloat:after{height: 0;font-size: 0;line-height: 0;visibility: hidden;content:"/20";display: block;clear: both;}
.clearFloat{zoom: 1;}
.left{float:left;width: 100px;height: 300px;background:#0ff;}
.right{float:right;width: 100px;height: 300px;background:#f0f;}
</style>
</head>
<body>
<div class="a1 clearFloat">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>

原理:先来解释下after 层叠样式表（CSS）的主要目的是给HTML元素添加样式，然而，在一些案例中给文档添加额外的元素是多余的或是不可能的。事实上CSS中有一个特性允许我们添加额外元素而不扰乱文档本身，这就是“伪元素”(after,before)。
clearFloat:after 在应用了clearFloat这个class的标签内部的最后面加一段内容。内容由cotntent控制，如果没有内容时，就一定要加一个空格或 (/20) 空格的数字编码，否则，伪元素无论如何都无法正常工作。好了，这都是话外话了，总之加上.clearFloat:after{height: 0;font-size: 0;line-height: 0;visibility: hidden;content:"/20";display: block;clear: both;}这么一个类，我们就可以很好的解决浮动的问题。而content:"/20";display: block;clear: both;这三个属性是我们必须要加的，而其他属性，因为正在不同的浏览器中显示效果不一样，所以加上这些可以干掉标签的属性而使得这个伪元素一定不对其他元素产生影响。一般来说我们会定义一个专门的类，实现代码的复用，所以这里我单独定义了一个clearFloat类，而不是使用a1这个类，当然你也可以使用a1这个类。而zoom:1;是什么意思呢，IE8以上和非IE浏览器才支持:after，zoom(IE转有属性)可解决ie6,ie7浮动问题。这样，兼容性也解决了。

优点：好，好，好，主流的解决方法，大型网站都在使用。你在网页中右击检查元素的时候，可能会看到::after这么一个东西，这就是伪元素。

缺点:比起优点来说，缺点不算什么，代码多了点，难了点。

建议：用

4.父级div定义overflow:auto;

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动</title>
<style>
.a1{width: 300px;background:#f00;overflow: auto;}
.left{float:left;width: 100px;height: 300px;background:#0ff;}
.right{float:right;width: 100px;height: 300px;background:#f0f;}
</style>
</head>
<body>
<div class="a1">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>

原理:父区域不能定义height，使用overflow:auto时，浏览器会自动检查浮动区域的高度，父区域没有定义高时，内部内容的高会自动撑开父区域。如果父区域定义了高，当高小于子区域内容的高时会产生滚动条。大于时没关系，但不是跟第一个清除浮动的方法重叠了，所以一般我们是不会定义高的。父区域的宽怎么定义都没关系，但是子区域的宽加起来大于父区域的宽时，也会产生滚动条。

优点: 简单，兼容性好

缺点: 内部宽超过父级div时，会出现滚动条

建议：不推荐使用，如果你需要出现滚动条或者确保你的代码不会出现滚动条就使用吧。

5.父级div定义overflow:hidden;

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动</title>
<style>
.a1{width: 300px;background:#f00;overflow:hidden;}
.left{float:left;width: 100px;height: 300px;background:#0ff;}
.right{float:right;width: 100px;height: 300px;background:#f0f;}
</style>
</head>
<body>
<div class="a1">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>

原理: 使用overflow:hidden时，浏览器会自动检查浮动区域的高度。高不需要定义，不然跟第一种不是一样，重复，而且页面的扩展性不好。如果父区域定义了这个属性，那么子区域超出部分都会被隐藏。在页面中常用来做一些超出区域隐藏的效果，还能有清除浮动的功能。但是如果你不要超出区域隐藏的话，那就不要使用这个了。而且如果你给一个子标签定义了position,想让它定位到父区域外面是没用的，隐藏了。

优点: 简单，还有超出区域隐藏的效果，兼容性好

缺点: 超出区域会隐藏

建议：只推荐没有使用position或对overflow:hidden理解比较深的朋友使用。

6.最简单的，你子区域浮动，我父区域也浮动好吧。

原理:所有代码一起浮动，你被抽离处文档流了，那我跟你一起出去吧。

优点:好像没有也

缺点: 都说浮动是很麻烦的，你搞得我父亲的父亲也要解决清除浮动的问题。

建议: 如果你只是要清除浮动就不建议使用。如果的你的父区域刚好需要浮动的话，那就用吧。

7.父区域定义display:table;将父区域变成表格

代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动</title>
<style>
.a1{width: 300px;background:#f00;display: table;}
.left{float:left;width: 100px;height: 300px;background:#0ff;}
.right{float:right;width: 100px;height: 300px;background:#f0f;}
</style>
</head>
<body>
<div class="a1">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>

原理: 我也不是很理解。反正定义了这个属性，会让你的div跟表格(这个css3的属性的出现，给了传统表格种种一击)一样，它能够让一个HTML元素和它的子节点像table元素一样。使用基于表格的CSS布局，使我们能够轻松定义一个单元格的边界、背景等样式，而不会产生因为使用了table那样的制表标签所导致的语义化问题。当你定义了这个属性后，父区域要定义宽了，父区域的宽不在继承上一级标签了，而是内部元素加起来的宽。如果你定义了宽就没这个问题，当然宽要大于内部区域的合起来的宽。你定义比内部小的高也没用了，它的高还是会跟内部的高一样，除非你定义高要大于内部的高。

优点+建议: 如果你能搞懂，并需要应用到表格时

缺点: 上面原理已经说了，但可能会有更多问题，我只是简单的实验了下，布局太简单，许多问题实验不出来。

这是我的第一篇博客，耗时两天，花了挺多经历来查资料和实验的。可能在言语上有些啰嗦，但是对于一些不理解的同志们，我还是多说点。以后的博客我会尽量组织好语言的。当然，这也是我对于我的学习总结，希望能给大家一些帮助吧。