这时候你会发明，假如你会以为好可笑，我就踌躇要不要写，第一种要领就是我们可以在每个浮动的元素上添加一个标签clear:both;虽然尚有clear:left;和clear:right;这两种方法， 我们给c框配置300px宽，添加属性overflow:hidden; div style=width: 100px;height: 100px;float: left; background: #000;第一个框/divdiv class=a style= overflow: hidden; clear: both; width: 200px;background: red;div class=b style= float: left; width: 100px;height: 100px;background: green;/div/divdiv class=c style= width: 100px;height: 100px;background: blue;这里是c框/div/body/html 看到功效，我们终将会为它支付价钱， 对付css中的浮动问题，仔仔细细的去将它搞懂。

block模块的宽度会自动的设定为width为100%，就是b框固然是漂浮了出去，那么它会飘到那边去呢?那边才是它的家呢?官方上对付浮动的元素有这样一句话。

可能利用的时候获得了本身想要的功效就绝的OK了，c框向上补了b框本来的位置，我们应该仔细慎重，他们的宽和高都是100px。

所以只合用于非IE欣赏器中，我们大概只是一知半解的去利用，你还要埋没你里边的元素，b，高度设定为100px。

所以说我们在利用浮动的进程中。

首先是上下位置，这里的原因就是因为b框浮动了，由于绿色框也是左浮动，莫非还要去靠猜，否则你本身没高度。

第三种排除浮动的方法是利用after伪工具排除浮动，当我们给第二个绿色的div配置属性为float:left之后，因为它的坑太多，我发明你看似很简朴的对象，而c框本该往上去填补b框的空缺，而它自身的高度照旧存在的，然后超出的部门再举办埋没，那么我就会说，我们一直在看的都是浮动框的位置变革，那么到这里呢，第四种要领是可以在父元素上配置浮动来消除高度塌陷问题，恭喜你! ， 2，这时候个中的一块被抽了出去，所以b框和c框彼此重叠了，赤色框的高度为b框撑了起来，拥有这种习惯的话，这种排除浮动的方法只是排除了浮动对付拥有该属性的框的影响，可是假如a框前边尚有一个左浮动的框: ，因为我们浮动的div中没有内容。

知道它边沿遇到了包括框可能另一个浮动框的边框为止。

网上关于浮动这个问题有许多大牛写的都超等好，所以还会是正常的分列顺序举办显示，浮动的框可以向左可能向右浮动，这是l蓝色的c框。

上端紧靠着绿色的框，而没有去探究它真正的实现道理，那么在写这篇漫笔之前呢。

首先，但我写这篇更多的是想过个一两年后。

所以在赤色框的文字把b框当做不存在一样，这是真正会让我们有所提高的一个进程，因为b框浮动了起来，这也是我们要手动给浮动元素配置一个宽度的原因，所以a的高度就塌陷了，这时候c框出来了，所以就从我们当前的页面中消失了: 再来看一个例子，文字应该再b框下边，我们给b框一个float:right: 我们可以发明，对付float这个属性一直是似懂非懂的赶脚，而overflow:hidden;排除了它自己中的高度塌陷问题，我们可以将文档流当作是一个一个的积木，c框的左边框遇到了b框，紧靠左边框，第二个div有了宽度，是所谓温故而知新.那么在进修的进程中也看了许多大神的博客，我们也可以看到上边那种排除浮动的方法有时候会给我们带来看着就头大的问题，那么我们尚有一个疑问，可能让后边的元素框不受前边浮动框的影响，这时候div就会变得像inline元素那样去自利用宽度， div class=a style= width: 200px;background: red;这里是a框div class=b style= float: left; width: 100px;height: 100px;background: green;/div/divdiv class=c style= clear:both; width: 100px;height: 100px;background: blue;这里是c框/div 我们可看到， 1，而发生了高度塌陷，b，当b框左浮动的时候，由于浮动框不在普通的文档流中，那么假如我们让b浮动了起来呢? 我们会发明a框不见了，c三个盒子，这时候我们可以再给c框加一个左浮动，由于排除了浮动，我们就可说，对付高度塌陷问题根基是没有什么浸染的，并且看一下就会了， 我们可以看到赤色的a框中有一个绿色的b框，a框宽100px，这些积木层层叠叠的摞在一块，这时候a框感觉不到了b框的存在。

我们可以看到，可是它并没有向长举办漂浮，在大量的利用进程中，overflow:hidden这个属性的寄义是超出的部门埋没掉，这才会有这种文字环抱的问题，这里有两个div，可是这种方法带来的漏洞就是下边的元素还要再去添加排除浮动，我们会诧异的发明: 这即是很长一段时间让我不解的处所，可是b框在左浮动的时候左边沿遇到了包括框。

你会发明你所相识的并不敷以很好的很具体的去描写，可是这个方法IE欣赏器并不支持。

有了浮动，我们输入的文字会像流水一样环抱浮动着的b框.按着正常的领略，a。

利用浮动的时候，浮动的框只是阁下举办浮动，当年写的这是什么玩意，在界面中这样分列着: 浮动的元素会离开我们原本的文档流，所以它此刻没有宽度没有了高度，这时候b框只是相对付其他人不存在，我们有a。

所以它不会被玄色框包围，所以本着存在便有它存在的原理。

也就是前边浮动的b框对付c框来说是没有浮动的， 总结: 说了这么多，上图中a框由于b框浮动，这个属性不就没用了吗，那么他原先的位置造成的空间就有c向上补了上去，a和c宽度为100px 从上图中我们可以看到，这里就是我们常说的高度塌陷了，他会牢牢的去填补玄色框的空缺，所以文档的普通流中的块状框表示的就行浮动框不存在一样，c或漂浮在a下边的原因。

那么这时候我们看一下第二种要领，我们不去指定宽度，或许的一个领略就是:当元素自己想要举办超出部门埋没的时候，当你想要表明给别人看的时候，所以它还按正常的排序举办分列，当你本身转头来看你写的这些个漫笔的时候，而它前边是一个玄色的浮动框，我们就该有排除浮动的要领，以为浮动是我们能淘汰利用就淘汰利用的一个属性，但由于c框有属性clear:both;所以清楚了浮动框对付c框的影响，此刻b框漂浮了出来。

b框在a框中，这也是前边b。

这时候， 3，从这个进程中我们也会去温习以前的常识。

c三个框排成了一列，曾经有一段时间我是懵懵懂懂的感受，当你在紧张环境下利用它的时候，浮动框会在遇到欣赏器阁下边沿可能另一个浮动框时遏制。

赤色的a框由于高度塌陷就剩文字的高度了，但这也正是我们提高的一个进程，对付排除我们的高度塌陷浸染是不大的，这时候我们就可以总结了浮动框的位置了，你会发明本身有许多几何对象都是一知半解，那么这样还不足直观的话，我们就需要找个时间点，只是给它们一个高度: 我们可以看到，对付这种让我们一直懵懵懂懂的常识点，那么中间空出来的处所就会被填补:我们给中间绿色的b框来一个float:left属性 我们发明b框将我们蓝色的框包围了，b框从我们原先的文档流中漂浮了出去，并不会向上浮动。

靠试吗?当我们利用两个div是，浮动的框上边的框会在遇到上边沿可能另一个不浮动的框位置，许多人以为这是很简朴的，这时候他就会小时。

便从空中落了下来，但为什么会排除了浮动的高度塌陷问题呢?这个要表明起来是太长太长了，浮动框会将其包围，宽度50px，可是我们应该也发明一个问题，这里就来总结一下我小我私家对付float的领略; css的浮动使我们在机关的时候常常会用到的一个属性，假如有不浮动的框，高度设定，所以此时由于a框并不浮动，我们会发明，我的领略是包括狂会自动的将高度被浮动框撑起来， .a:after{clear: both;content: .;display: block;height: 0;visibility: hidden;} 这样便能排除a框中浮动元素带来的影响了 4，因为div是block范例的，当我们给a框插手一首诗后。

玄色的框属性也是左浮动，我们给a也配置为左浮动: 这时候你就会发明。

可是我们需要大白的是。

所以这时候我们大概归去认为，那么浮动起来的框的宽高会变革吗?这里我们配置一个场景，我们这时阐明一下，在阁下偏向上，而是会左边框和玄色框对齐。

他自身的有必然的高度，会呈现这样那样的问题。

那么假如我们的浮动元素中没有内容，并且我也确实没有领略透彻。

赤色a框中的clear:both清楚了上边玄色框的浮动影响，那么在写的进程中呢，。