您的位置：首页 > Web前端 > CSS

CSS学习笔记9：清除浮动

2017-02-12 20:50 357 查看

在实际操作中，一般不会给父亲盒子设置高度，它的高度是随内容增加自适应的高度。浮动盒子不属于文档标准流，父亲盒子里的元素浮动后，就脱离了标准文档流，所以无法撑高父亲盒子，父亲盒子的高度为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机制。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css 布局

相关文章推荐

新的分享

章节导航