WEB学习-CSS清除浮动
- 浮动的清除
-
来看一个实验:现在有两个div,div身上没有任何属性。每个div中都有li,这些li都是浮动的。 <div> <ul> <li>HTML</li> <li>CSS</li> <li>JS</li> <li>HTML5</li> <li>设计模式</li> </ul> </div> <div> <ul> <li>学习方法</li> <li>英语水平</li> <li>面试技巧</li> </ul> </div> 我们本以为这些li,会分为两排,但是,第二组中的第1个li,去贴靠第一组中的最后一个li了。
第二个div中的li,去贴第一个div中最后一个li的边了。
原因就是因为div没有高度,不能给自己浮动的元素,一个容器。
- 清除浮动方法1:给浮动的元素父控件加高度属性
-
如果一个元素要浮动,那么它的祖先元素一定要有高度。有高度的盒子,才能浮动属性才能生效。 只要浮动在一个有高度的盒子中,那么这个浮动就不会影响后面的浮动元素。所以就是清除浮动带来的影响了。
- 清除浮动方法2:clear:both;
-
网页制作中,高度height很少出现。因为能被内容撑高!那也就是说,刚才我们讲解的方法1,工作中用的很少。 那么如何不写height,也把浮动清除了呢?也让浮动之间,互不影响呢? <div> <ul> <li>HTML</li> <li>CSS</li> <li>JS</li> <li>HTML5</li> <li>设计模式</li> </ul> </div> <div class="box2"> → 这个div写一个clear:both;属性 <ul> <li>学习方法</li> <li>英语水平</li> <li>面试技巧</li> </ul> </div> clear:both; clear就是清除,both指的是左浮动、右浮动都要清除。意思就是:清除别人对我的影响。 这种方法有一个非常大的、致命的问题,margin失效了。
- 清除浮动方法3:隔墙法
-
<div class="box1"> <ul> <li>HTML</li> <li>CSS</li> <li>JS</li> <li>HTML5</li> <li>设计模式</li> </ul> </div> <div class="cl h16"></div> <div class="box2"> <ul> <li>学习方法</li> <li>英语水平</li> <li>面试技巧</li> </ul> </div> .cl{ clear: both; } .h16{ height: 16px; }
还有添加了“内墙法”,在div内部添加一个 div - 清除浮动方法4:overflow:hidden;
-
overflow就是“溢出”的意思, hidden就是“隐藏”的意思。 overflow:hidden; 表示“溢出隐藏”。所有溢出边框的内容,都要隐藏掉。 本意就是清除溢出到盒子外面的文字。但是,前端开发工程师又发现了,它能做偏方。 一个父控件不能被自己浮动的子控件,撑出高度。但是,只要给父控件加上overflow:hidden; 那么,父控件就能被子控件撑出高了。这是一个偏方。 div{ width: 400px; border: 10px solid black; overflow: hidden; }
- 清除浮动的总结
-
1) 加高法: 浮动的元素,只能被有高度的盒子关住。 也就是说,如果盒子内部有浮动,这个盒子有高,那么妥妥的,浮动不会互相影响。但是,工作上,我们绝对不会给所有的盒子加高度,这是因为麻烦,并且不能适应页面的快速变化。 <div> → 设置height <p></p> <p></p> <p></p> </div> <div> → 设置height <p></p> <p></p> <p></p> </div> 2) clear:both;法 最简单的清除浮动的方法,就是给盒子增加clear:both;表示自己的内部元素,不受其他盒子的影响。 <div> <p></p> <p></p> <p></p> </div> <div> → clear:both; <p></p> <p></p> <p></p> </div> 浮动确实被清除了,不会互相影响了。但是有一个问题,就是margin失效。两个div之间,没有任何的间隙了。
3)隔墙法: 在两部分浮动元素中间,建一个墙。隔开两部分浮动,让后面的浮动元素,不去追前面的浮动元素。 墙用自己的身体当做了间隙。 <div> <p></p> <p></p> <p></p> </div> <div class="cl h10"></div> <div> <p></p> <p></p> <p></p> </div> 我们发现,隔墙法好用,但是第一个div,还是没有高度。如果我们现在想让第一个div,自动的根据自己的儿子,撑出高度,我们就要想一些“小伎俩”,“奇淫技巧”。 内墙法: <div> <p></p> <p></p> <p></p> <div class="cl h10"></div> </div> <div> <p></p> <p></p> <p></p> </div> 内墙法的优点就是,不仅仅能够让后部分的p不去追前部分的p了,并且能把第一个div撑出高度。这样,这个div的背景、边框就能够根据p的高度来撑开了。 4)overflow:hidden; 这个属性的本意,就是将所有溢出盒子的内容,隐藏掉。但是,我们发现这个东西能够用于浮动的清除。 我们知道,一个父亲,不能被自己浮动的儿子撑出高度,但是,如果这个父亲加上了overflow:hidden;那么这个父亲就能够被浮动的儿子撑出高度了。这个现象,不能解释,就是浏览器的小偏方。 并且,overflow:hidden;能够让margin生效。 - 浏览器兼容问题
-
上述知识点遇见的浏览器兼容问题 第一,IE6,不支持小于12px的盒子,任何小于12px的盒子,在IE6中看都大 解决办法很简单,就是将盒子的字号,设置小(小于盒子的高),比如0px。 height: 4px; _font-size: 0px; 我们现在介绍一下浏览器hack。hack就是“黑客”,就是使用浏览器提供的后门,针对某一种浏览器做兼容。 IE6留了一个后门,就是只要给css属性之前,加上下划线,这个属性就是IE6认识的专有属性。 比如: _background-color: green; 解决微型盒子,正确写法: height: 10px; _font-size:0; 第二,IE6不支持用overflow:hidden;来清除浮动的 解决办法,以毒攻毒。追加一条 _zoom:1; 完整写法: overflow: hidden; _zoom:1; 实际上,_zoom:1;能够触发浏览器hasLayout机制 强调一点, overflow:hidden;的本意,就是溢出盒子的border的东西隐藏,这个功能是IE6兼容的。不兼容的是overflow:hidden;清除浮动的时候。 我们刚才学习了两个IE6的兼容问题,这两个IE6的兼容问题,都是通过多写一条hack来解决的。 这个我们称为伴生属性。 height:6px; _font-size:0; overflow:hidden; _zoom:1;