在实际操作中,一般不会给父亲盒子设置高度,它的高度是随内容增加自适应的高度。浮动盒子不属于文档标准流,父亲盒子里的元素浮动后,就脱离了标准文档流,所以无法撑高父亲盒子,父亲盒子的高度为0,也就会出现父亲盒子不会自动伸高来闭合浮动元素的现象。但是,在实际布局中,我们并不希望这样,所以需要闭合浮动元素,使其父亲盒子表现出正常的高度。为了解决这个问题,我们就要清除浮动。
清除浮动的方法有4种:
一、给浮动的元素的祖先元素加高度。
浮动的元素,只能被有高度的盒子关住。 也就是说,如果盒子内部有浮动,这个盒子有高,那么妥妥的,浮动不会互相影响。但是,工作上,我们绝对不会给所有的盒子加高度,这是因为麻烦,并且不能适应页面的快速变化。
二、clear:both;
在较后面的最后一个盒子增加clear:both;
CSS代码:
.box2{
clear: both;
}
HTML代码:
<div class="box1">
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
<li>HTML5</li>
<li>设计模式</li>
</ul>
</div>
<div class="box2">
<ul>
<li>学习方法</li>
<li>英语水平</li>
<li>面试技巧</li>
</ul>
</div>
clear就是清除,both指的是左浮动、右浮动都要清除。
最简单的清除浮动的方法,就是给盒子增加clear:both;表示自己的内部元素,不受其他盒子的影响。但这种方法有一个非常大的、致命的问题,margin失效了。
三、隔墙法
墙用自己的身体当做了间隙。
1.外墙法
CSS代码
.cl{
clear: both;
}
.h16{
height: 16px;
}
HTML代码
<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>
2.内墙法
内墙法的优点就是,不仅仅能够让后部分的p不去追前部分的p了,并且能把第一个div撑出高度。这样,这个div的背景、边框就能够根据p的高度来撑开了。
HTML代码:
</head>
<body>
<div class="box1">
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
<li>HTML5</li>
<li>设计模式</li>
</ul>
<div class="cl h16">我是修在家里的一堵墙</div>
</div>
<div class="box2">
<ul>
<li>学习方法</li>
<li>英语水平</li>
<li>面试技巧</li>
</ul>
</div>
</body>
四、overflow:hidden;
overflow就是“溢出”的意思, hidden就是“隐藏”的意思。表示“溢出隐藏”,所有溢出边框的内容,都要隐藏掉。
本意就是清除溢出到盒子外面的文字。但是,前端开发工程师又发现了,它能做偏方。
- 一个父亲不能被自己浮动的儿子,撑出高度。但是,只要给父亲加上overflow:hidden; 那么,父亲就能被儿子撑出高了。并且,overflow:hidden;能够让margin生效。
HTML代码:
div{
width: 400px;
border: 10px solid black;
overflow: hidden;
}
五、伪元素
可以完美兼容当前主流的各大浏览器!
1. after伪元素
基本语法:
css部分:
.clearfix:after {
content:"";
Visibility:hidden;
Display:block;
Height:0;
Clear:both;
}
.clearfix{
Zoom:1;
}
html语义框架
<div class="news clearfix">
<img src="news-pic.jpg" />
<p>哈哈哈</p>
</div>
2.双伪元素
基本语法:
.clearfix:before,.clearfix:after{
display: table;
content: "";
}
.clearfix:after {
clear: both;
}
.clearfix {
zoom: 1;
}
总结:清除浮动大致有以下几种方法:
1.给父亲加高
2.clear:both法。
给最后一个儿子加clear:both。(margin 失效)
内墙:在第一个儿子里添加一个类为clear:both的盒子。
外墙:在两个儿子之间添加一个类为clear:both的盒子。
3.overflow:hidden。给父亲盒子添加overflow:hidden 属性。(IE6不支持,需添加_zoom:1;并且,如果想在压父盒子边做特效会被隐藏一部分。)
4.伪元素法。包括after伪元素和双伪元素两种。可以完美兼容当前主流的各大浏览器,作为主要清理浮动方式。清除小块与小块之间的浮动,可选择overflow:hidden。
六、浏览器兼容问题
上述清除浮动的知识点遇见的浏览器兼容问题:
1.IE6、IE7,不支持小于12px的盒子,任何小于12px的盒子,在IE6中看都大。
IE6留了一个后门,就是只要给css属性之前,加上下划线,这个属性就是IE6认识的专有属性,这就是浏览器hack(黑客)。
解决办法很简单,就是将盒子的字号,设置小(小于盒子的高),比如0px,并在前面加上下滑线。
height: 4px;
_font-size: 0px;
2.IE6不支持用overflow:hidden;清除浮动
解决办法:
overflow: hidden;
_zoom:1;
IE6兼容overflow:hidden;的本意,就是溢出盒子的border的东西隐藏,不兼容的是overflow:hidden;清除浮动的时候。_zoom:1;能够触发浏览器hasLayout机制。