CSS——浮动的清除

现在有两个div，div身上没有任何属性，每个div中都有li，这些li都是浮动的。

清除浮动的方法1
给浮动的元素的祖先元素加高度：如果一个元素要浮动，那么它的祖先元素一定要有高度。有高度的盒子才能关住浮动。

在以下例子中，div中有很多li，li在浮动，所以div必须要有高度。只要浮动在一个有高度的盒子中，这个浮动就不会影响后面的浮动元素。

 <style type="text/css">li{float: left;width: 120px;height: 40px;margin-right: 10px;background-color: gold;text-align: center;}</style>
</head>
<body><div><ul><li>橘生淮南</li><li>最好的我们</li><li>你好旧时光</li></ul></div><div><ul><li>时间的女儿</li><li>漫长的告别</li><li>被偷走的那五年</li></ul></div>
</body>

原本这些li会分为两排，但是第二组中的第一个li贴着第一组中的最后一个li。因为div没有高度，不能给自己浮动的元素一个容器。浮动和浮动之间互相有影响。
所以增加一个div的style：

 div{height: 80px;border: 1px solid #000;}

清除浮动的方法2
clear: both
其实在网页制作中，高度height很少出现，因为能被内容撑高。方法1在工作中用的很少。所以如果想不写height也能清除浮动的话，则：

 <style type="text/css">*{margin: 0;padding: 0;}li{float:left;width:120px;height:40px;text-align:center;background-color:orange;}.box2{clear: both;}</style>
</head>
<body><div class="header"><ul><li>一点点</li><li>Coco</li><li>甜荟</li></ul></div><div class="box2"><ul><li>火锅</li><li>串串</li></ul></div>
</body>

第二个div写一个clear: both;属性，指的是左浮动、右浮动都要清除。即清除别人对我的影响。
这种方法有一个致命的问题：margin失效了。

清除浮动的方法3 隔墙法

 <style type="text/css">*{margin: 0;padding: 0;}li{float:left;width:120px;height:40px;text-align:center;background-color:orange;}.box2{clear: both;}.cl{clear:both;}.h10{height:10px;background-color:lightpink;}</style>
</head>
<body><div class="header"><ul><li>一点点</li><li>Coco</li><li>甜荟</li></ul></div><div class="cl h10"></div><div class="box2"><ul><li>火锅</li><li>串串</li></ul></div>
</body>

即< div class=“cl h10”>< /div>这堵墙隔开了两部分浮动，高度也可以靠自己的身高来撑。两部分浮动互不影响。

隔墙法虽然好用，但是第一个div还是没有高度，如果现在让第一个div自动根据自己的儿子撑出高度，就要想一些“奇淫技巧”，如内墙法。与隔墙法相比，不仅能隔开浮动，还能在第一个div里撑出高。

内墙法（即把< div class=“cl h10”></ div>放入第一个< div>中）

 <style type="text/css">*{margin: 0;padding: 0;}li{float:left;width:120px;height:40px;text-align:center;background-color:orange;}.box2{clear: both;}.cl{clear:both;}.h10{height:10px;background-color:lightpink;}</style>
</head>
<body><div class="header"><ul><li>一点点</li><li>Coco</li><li>甜荟</li></ul><div class="cl h10"></div></div><div class="box2"><ul><li>火锅</li><li>串串</li></ul></div>
</body>

一个奇淫技巧：

 <style type="text/css">*{margin: 0;padding: 0;}div{background-color:blue;}p{float:left;width:100px;height:100px;background-color:green;}.cl{clear:both;}</style>
</head>
<body><div class="header"><p></p><div class="cl"></div></div>
</body>
</html>

一个父亲是不能被浮动的儿子撑出高的，脱标之后撑不出高。
这种时候产生一种绑定关系，改一个p中的高度，就要改div的高度。

 <style type="text/css">*{margin:0;padding:0;}div{height:190px;border:10px solid black;}.p1{float:left;width: 100px;height:150px;background-color:red;}.p2{float:left;width:100px;height:230px;background-color:yellow;}.p3{float:left;width:100px;height:190px;background-color:aliceblue;}</style>
</head>
<body><div class="p1"></div><div class="p2"></div><div class="p3"></div>
</body>
</html>

但是，只要清除div中的高，
并且

.cl{clear: both;}

同时

<body><p class="p1"></div><p class="p2"></div><p class="p3"></div><div class="cl"></div>
</body>

就可以清除浮动。

当两个p都浮动，所以div不能被撑出高，而在家里面修一堵墙就能够让div被儿子撑出高了。奇淫公式：

<div><p></p><p></p><div class="cl"></div>
</div>

清除浮动的方法4：overflow. hidden;
表示溢出隐藏，即所有溢出边框的内容都要隐藏掉。
本意是清除溢出到盒子外面的文字，但它可以是偏方。

 div{width: 400px;border: 10px solid black;overflow: hidden;}

 .box{overflow: hidden;margin-bottom: 10px;}

一个父亲不能被自己浮动的儿子撑出高度，但是如果这个父亲加上了overflow: hidden; 那么这个父亲就能够被浮动的儿子撑出高度了。并且overflow: hidden; 能够让margin生效.

总结：
浮动的元素，只能被有高度的盒子关住。也就是说，如果盒子内部有浮动，这个盒子有高，那么浮动不会相互影响。但是在实际工作中并不会给所有的盒子加高度，因为麻烦，并且不能适应页面的快速变化。所以我们要找到不给盒子加高度，但能够清除浮动的方法。

上述知识点所遇到的浏览器兼容问题：

一、 IE6 不支持小于12px的盒子，任何小于12px的盒子，在IE6中看着都大。
解决办法：将盒子的字号设小，使其小于盒子的高，比如0px:

height: 4px;
_font-size:0px;

浏览器hack：使用浏览器提供的后门，针对某一种浏览器做兼容。
IE6留了一个后门，就是只要给CSS属性之前加上下划线，这个属性就是IE6认识的专有属性，如：_background-color: green;

解决微型盒子的正确写法：

height:10px;
_font-size:0;

二、IE6不支持用overflow: hidden; 来清除浮动的
解决办法：以毒攻毒，追加一条

_zoom:1;

完整写法：

overflow:hidden;
_zoom:1;

_zoom1;能够触发浏览器hasLayout机制，只有IE6有，我们只需要让IE6好用。

overflow:hidden;的本意，就是溢出盒子的border的东西隐藏，这个功能是IE6兼容的，不兼容的是overflow:hidden;清除浮动的时候。

以上关于IE6的兼容问题，都是通过多写一条hack来解决的，这个称为伴生属性：

height:6px;
_font-size:0;

overflow:hidden;
_zoom:1;

CSS——浮动的清除相关推荐

进一步理解CSS浮动与清除浮动
本文主要探讨两个问题: 为什么CSS设置浮动会引起父元素塌陷为什么设置clear:both能清除浮动,并撑开父元素. 起因 CSS的浮动,算是我在写网页时用的最多的属性之一.但要说我对浮动的了解程度 ...
前端：CSS/11/CSS浮动和清除，CSS继承性，CSS优先级
CSS浮动和清除 float:让元素浮动,取值:left(左浮动),right(右浮动): clear:清除浮动,取值left(清除左浮动),right(清除右浮动) both(左右浮动都去掉): 1 ...
css浮动以及清除浮动
css浮动以及清除浮动 CSS的定位机制有3种:普通流(标准流).浮动和定位. 一.什么是浮动? 元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制,移动到其父元素中指定位置的过程. 选择器{f ...
CSS浮动与清除浮动
CSS浮动与清除浮动( 本文以div元素布局为例.) 前言:由于CSS内容比较多,只能有针对性的讲解. 如果读者理解CSS盒子模型,但对于浮动不理解,那么这篇文章可以帮助你. 首先要知道,div是块级 ...
CSS浮动和清除浮动
1 浮动简介 CSS浮动是指浮动元素会脱离"文档流"并向左或向右浮动,允许文本和内联元素环绕它,直到碰到父元素或者另一个浮动元素. 需要注意的是,在CSS定位中absolute绝对 ...
css 浮动和清除浮动
在写页面布局的过程中,浮动是大家经常用的属性.在好多的排版布局中都是用的的浮动比如说下面这些地方都是应用到了浮动. 在我学习浮动的时候可是熬坏了脑筋,在这里我分享一下我对浮动这块知识的总结. 一.浮动 ...
CSS——CSS浮动与清除浮动
文章目录浮动普通流(normal flow) 浮动(float) 什么是浮动? 浮动详细内幕特性 float 浮漏特案例:体会浮动现在就可以用float实现一些基本页面布局了链接清除浮 ...
html 如何去除浮动,CSS浮动? 如何清除浮动？
什么是浮动浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止. 由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样. 我们来看几个例子请看下 ...
css一个盒子里可以装3个图片并排吗_John: CSS浮动与清除浮动属性详解（CSS float clear）...
CSS里的浮动,可以让元素脱离标准流,从左上角或右上角依次贴边排列. 下面这个案例将会帮我们了解浮动的基本情况.下面这段代码块,外面是一个大div,里面包含着3个div,第一个左浮动,后两个无浮动. ...

CSS——浮动的清除

CSS——浮动的清除相关推荐

最新文章

热门文章