阅读前请看[CSS]CSS浮动float详解（二）：使用float

float虽然带来了很多好处，但是也带来了一些问题。

问题：

<!DOCTYPE html>
<html>
<head><title>测试</title><meta charset="utf-8"><style type="text/css">*{margin: 0;padding: 0;}li{float: left;list-style: none;height: 40px;width: 80px;background-color: orange;border: solid 1px #000;text-align: center;}</style>
</head>
<body><div class="div1"><ul><li>首页</li><li>性感美女</li><li>清纯妹子</li><li>丝袜美眉</li><li>非主流妹妹</li></ul></div><div class="div2"><ul><li>关于本站</li><li>联系我们</li><li>法律声明</li></ul></div>
</body>
</html>

我们像使用这段代码绘制两个导航条，但是结果却不尽人意。

我们发现，第二个div浮动到了第一个div后面。那么造成这个的原因是什么呢？

原因：

原因其实非常简单，上一篇我们讲到了使用float脱离文档流的几种表现，其中——脱离文档流表现四：子元素不会再撑出父容器的高和脱离文档流表现五：脱离文档流的元素，仍然是在父元素中浮动和是造成这种现象的主要原因。我们给两个div分别加边框，然后发现：

因为父元素都没有高度，所以两个div处在了同一个位置，且又占用一行。第一组li先开始浮动，浮动到了左上角，第二组li也要在顶部浮动，由于前面有了第一组li，所以就依靠着第一组li浮动了。由此造成了这样的效果。

解决办法

知道了为什么造成这样的错误，解决起来就比较容易了。

解决办法一，增加高度

原因是因为两个div处于同一个高度，影响了浮动的效果。所以，让第二组li在第一组li下面浮动，是最直接的方法，根据 脱离文档流表现五：脱离文档流的元素，仍然是在父元素中浮动，我们可以通过改变第一个div的高度来改变第二个div的位置，让元素浮动在第一组li的下方：

    <style type="text/css">*{margin: 0;padding: 0;}.div1{border: solid 5px #000;/*加个高度*/height: 50px;}.div2{border: solid 5px red;}li{float: left;list-style: none;height: 40px;width: 80px;background-color: orange;border: solid 1px #000;text-align: center;}</style>

这样，第二个div的位置就在第一组li的下方了，两组li就不会相互依靠了。

解决办法二：`clear:both`

CSS提供了一个属性clear:both如下。

none : 　允许两边都可以有浮动对象
both : 　不允许有浮动对象
left : 　不允许左边有浮动对象
right : 　不允许右边有浮动对象

所以clear属性并不是清楚元素的浮动，而是用来指出不允许有浮动对象的边情况。

    <style type="text/css">*{margin: 0;padding: 0;}.div1{border: solid 5px #000;}.div2{border: solid 5px red;/*this........*/clear: both;}li{float: left;list-style: none;height: 40px;width: 80px;background-color: orange;border: solid 1px #000;text-align: center;}</style>

当我们给第二个div指定了clear:both属性后，我们发现，问题解决了。这是因为div2说，我的左边不可以有浮动的元素，浏览器就调整div2的位置，直到左边没有浮动的元素。

解决办法三：隔墙法和内墙法

隔墙法和内墙法，都是使用clear：both实现的，二者也有相似性。

隔墙法

为什么会出现隔墙法呢？狮子和猿猿们在使用clear:both时，发现一个很致命的问题，那就是因为这两个div都没有高，所以，要想给这个两个div设置间隔（margin），简直痴人说梦！！！还好，这点小挫折难不到狮子和猿猿们，隔墙法由此诞生。

既然无法设置margin，那么就在这两个div之间加入一个有高度的透明的div，这样就实现了margin的效果：

<!DOCTYPE html>
<html>
<head><title>测试</title><meta charset="utf-8"><style type="text/css">*{margin: 0;padding: 0;}.div0{border: solid 5px #000;}.div1{border: solid 5px red;}li{float: left;list-style: none;height: 40px;width: 80px;background-color: orange;border: solid 1px #000;text-align: center;}.spacing{height: 20px;border: solid 2px #000;clear: both;}</style>
</head>
<body><div class="div0"><ul><li>首页</li><li>性感美女</li><li>清纯妹子</li><li>丝袜美眉</li><li>非主流妹妹</li></ul></div><div class="spacing"><!-- 我就是墙，用来当作边距 --></div><div class="div1"><ul><li class="first">关于本站</li><li>联系我们</li><li>法律声明</li></ul></div>
</body>
</html>

这样就成功的设置了两个div之间的边距。

内墙法

隔墙法用了一段时间以后，猿猿和狮子们又发现有问题了，这次问题比较棘手，那就是想要给两个div设置背景，但是两个div都没有高度，每次设置高度太麻烦了，如果能让div的高度再次包裹子元素就好了。
没有什么可以难得到狮子们和猿猿们的，经过长时间的编码，猿猿们发现了一条很有趣的现象，刚好可以解决这个问题。那就是内墙法，将隔墙法中的墙放入到div的内部，让我们来看一看代码：

<!DOCTYPE html>
<html>
<head><title>测试</title><meta charset="utf-8"><style type="text/css">*{margin: 0;padding: 0;}.div0{border: solid 5px #000;}.div1{border: solid 5px red;}li{float: left;list-style: none;height: 40px;width: 80px;background-color: orange;border: solid 1px #000;text-align: center;}.spacing{clear: both;}</style>
</head>
<body><div class="div0"><ul><li>首页</li><li>性感美女</li><li>清纯妹子</li><li>丝袜美眉</li><li>非主流妹妹</li></ul><div class="spacing"><!-- 墙在内部 --></div></div><div class="div1"><ul><li class="first">关于本站</li><li>联系我们</li><li>法律声明</li></ul></div>
</body>
</html>

注意边框，我们可以看到插入墙的div1的高度包裹了子元素，达到了目的：

为什么呢？
还记得刚刚所说的那句话吗？这是因为diiv.spacing说，我的左边不可以有浮动的元素，浏览器就调整div2的位置，直到左边没有浮动的元素，这样div.spacing就移动了第一组li的下方，中间其实空出了li高度的空白，这些空白只不过是被浮动的li遮挡住了而已，并不是被脱离文档流的li撑出的高。

解决办法四：`overflow:hidden`

overflow:hidden是溢出隐藏的作用，示例如下：

他有一个副作用：

<!DOCTYPE html>
<html>
<head><title>测试</title><meta charset="utf-8"><style type="text/css">*{margin: 0;padding: 0;}.div1{border: solid 5px #000;overflow: hidden;}.div2{border: solid 5px red;overflow: hidden;}li{float: left;list-style: none;height: 40px;width: 80px;background-color: orange;border: solid 1px #000;text-align: center;}</style>
</head>
<body><div class="div1"><ul><li>首页</li><li>性感美女</li><li>清纯妹子</li><li>丝袜美眉</li><li>非主流妹妹</li></ul></div><div class="div2"><ul><li>关于本站</li><li>联系我们</li><li>法律声明</li></ul></div>
</body>
</html>

给div1和div2加上overflow:hidden后，我们发现，div1和div2有高了！！！
这样又很方便的设置背景了。

为什么呢?谁知道呢！

注意： IE6 不支持使用overflow:hidden 清除浮动

[CSS]CSS浮动float详解（三）：清除浮动方案相关推荐

css中float详解,CSS浮动属性Float详解？史上最全Float详解
我们在学习css样式的时候,都知道css是盒概念,并且每一个盒子都是一个元素,下面我们就对CSS浮动属性Float进行详解,让你彻底了解Float. 一:什么是Float浮动? Float浮动是css ...
CSS 清除浮动原理详解
CSS 清除浮动原理详解一. 浮动float float属性的本质是用来实现文字环绕效果的. 它有一个很大的副作用:会导致父容器的高度坍塌疑问: 那么将父容器固定高度有用吗? 没用,因为只要浮动元 ...
0基础快速入门CSS技术栈（6）—图解详细阐述说透CSS的浮动及应用、浮动的扩展及清除浮动和详解快速·1photoshop切图（附详细案例源码解析过程）2021-01-07更新
文章目录 1. 浮动(float)重点提炼 2. CSS 布局的三种机制 3. 为什么需要浮动? 3.1 example01 4. 什么是浮动(float) 4.1 作用 4.1.1 example0 ...
html右侧浮动菜单,HTML+CSS：css元素浮动详解，使用浮动制作导航栏菜单
原标题:HTML+CSS:css元素浮动详解,使用浮动制作导航栏菜单今天这篇文章我们来说一下css的浮动属性(float),给块状元素添加float属性可以使其转变为行内元素,也就是我们所说标签对象 ...
CSS float详解
一.float 1.什么是浮动:在我们布局的时用到的一种技术,能够方便我们进行布局,通过让元素浮动,我们可以使元素在水平上左右移动,再通过margin属性调整位置 2.浮动的原理:使当前元素脱离普通流 ...
CSS浏览器兼容性问题详解总结
CSS浏览器兼容性问题详解总结 2009-11-12 11:39 对css缩写的支持问题: 不论是ie 还是ff对css的缩写都有一小点问题比如 border: 0xp solid #fff;两个浏 ...
CSS篇之2. 清除浮动，什么时候需要清除浮动，清除浮动都有哪些方法
2. 清除浮动,什么时候需要清除浮动,清除浮动都有哪些方法 ? 一.什么时候需要清除浮动? 我们对元素进行了浮动(float)时,我们的元素就会脱离文档流,像一只小船一样漂流在文档之上. 在 CSS ...
CSS相对定位和绝对定位详解
CSS相对定位和绝对定位详解如果,说浮动, 关键在一个 "浮" 字上面, 那么我们的定位,关键在于一个 "位" 上. PS: 定位是我们CSS算是数一数二难 ...
css样式继承规则详解
css样式继承规则详解一.总结一句话总结:继承而发生样式冲突时,最近祖先获胜(最近原则). 1.继承中哪些样式不会被继承? 多数边框类属性,比如象Padding(补白),Margin(边界),背景 ...
css中table标签详解(一)
css中table标签详解(一) 什么是table标签,以及table标签的组成? 不叨叨,直接上代码 <table><tr><td></td>< ...

[CSS]CSS浮动float详解（三）：清除浮动方案

问题：

原因：

解决办法

解决办法一，增加高度

解决办法二：`clear:both`

解决办法三：隔墙法和内墙法

隔墙法

内墙法

解决办法四：`overflow:hidden`

[CSS]CSS浮动float详解（三）：清除浮动方案相关推荐

最新文章

热门文章

[CSS]CSS浮动float详解（三）：清除浮动方案

问题：

原因：

解决办法

解决办法一，增加高度

解决办法二：clear:both

解决办法三：隔墙法和内墙法

隔墙法

内墙法

解决办法四：overflow:hidden

[CSS]CSS浮动float详解（三）：清除浮动方案相关推荐

最新文章

热门文章

解决办法二：`clear:both`

解决办法四：`overflow:hidden`