让每一名学员高薪就业
www.itsource.cn
浮动的运用以及清除浮动带来的影响
浮动对于大多数初学者来说都是一个不容忽视的难点，有些初学者光知道浮动而不知道浮动的真正意义。下面我们看看到底是怎么回事。
1、浮动创建初衷
在浮动还没出现的时候，当时我们的网页排版还处于一个蛮荒的时代，整个网页中有一两张图片出现都很不错了，而且还是那种图片一行文字一行的排版，如下图：
如果你想布局成左边图片右边文字或者布局成我们平时做笔记的方式，这是候浮动就出现了。所以浮动创建的最初目的，就是为了解决文字环绕效果，听起来来有点抽象，那具体是什么呢。我们看看下面这张图：
让每一名学员高薪就业
www.itsource.cn
究竟浮动后是怎样造成这种现象的呢，我们看看下面这两张图就知道了，如图下：
让每一名学员高薪就业
www.itsource.cn
浮动最初创建的时候是为了解决文字环绕效果，而文字环绕效果会对父元素的高度造成破坏，从而塌陷。简而言之：浮动具有破坏性，导致父元素高度塌陷。而我们常常认为浮动造成父元素高度塌陷是一种bug，这里要告诉大家：这不是bug，而是标准。
2、浮动实际开发中的运用：
通常我们要么左浮动，要么右浮动
让每一名学员高薪就业
www.itsource.cn
3、清除浮动：
我们通常都在说清除浮动，其实应该是清除浮动所带来的影响。
常见的清除浮动的三种方式：
1）在紧接着浮动框的后面新建一个div然后引入样式clear:both代码：
让每一名学员高薪就业
www.itsource.cn
效果：
注意：在页面中增加冗余标签，违背了语义网的原则，对后期获取元素也增加了不必要的对象
2）在父级元素中引入overflow:hidden,
这种方式有前提条件：
必须所有的子元素都浮动
父元素不设置高度
代码：
让每一名学员高薪就业
www.itsource.cn
效果：
注意：一旦子元素的大小超过父容器的大小，就会出显示问题
3）在父元素中使用:after伪选择符，就可以在父容器的尾部自动创建一个子元素
代码：
"content:"020";"是在父容器的结尾处放一个空白字符，"height:0;"是让这个这个空白字符不显示出来，让每一名学员高薪就业
www.itsource.cn
"display:block;clear:both;"是确保这个空白字符是非浮动的独立区块。
效果：
具体用哪种方式清除浮动所带来的影响根据情况而定。
清除浮动的方法
清除浮动（ClearingFloat）-解决布局问题的有效方法
清除浮动（ClearingFloat）是一种有效的解决布局问题的方法。在网页设计中，有时候会出现浮动元素，而这些元素却会影响网页的布局效果。这时，我们就需要使用清除浮动的方法来解决这些问题。
清除浮动的原理是，利用浮动元素的父元素来清除它的浮动，以达到让它重新按正常的布局流动的效果。要实现这一点，我们需要给浮动元素的父元素添加一个clear属性，可以是left,right,both，而不是给浮动元素添加clear属性，因为这样做的话，它会把自身的浮动清除掉，而不会影响到它的父元素。
清除浮动的方法有很多，可以使用css的clear属性，也可以使用伪元素清除浮动，或者使用clearfix类来实现清除浮动的效果。
使用CSS的clear属性来清除浮动，只需要在浮动元素的父元素中添加clear：both即可。而使用伪元素清除浮动，只需要在浮动元素的父元素中添加：after，然后设置
content:’‘，display：table就可以清除浮动了。最后，使用clearfix类来实现清除浮动，只需要在浮动元素的父元素中添加.clearfix并且添加以下样式就可以了：
.clearfix{
overflow:auto;
zoom:1;
总之，清除浮动是一种有效的解决布局问题的方法，可以用来解决一些浮动元素影响布局的问题。当然，清除浮动的方法也不是万能的，在一些特定的场景下，还是有可能会出现问题的。因此，为了避免出现问题，我们最好在使用清除浮动的时候先测试一下，谨慎使用。
为什么要清除浮动，什么时候清除浮动，怎样清除浮动？为什么要清除浮动，什么时候该清除浮动:情况?:当容器的?度未定，且容器内有浮动的元素，在这种情况下，容器的?度不能?动伸长以适应内容的?度，使得内容溢出到容器外?影响布局。此时应该清除浮动。情况?:当浮动元素应占据的位置被未浮动元素占据，从?影响布局的情况下，应该清楚浮动元素的浮动，使其占据应有位置。情况三:元素浮动后，就不在整个?档流的管辖范围了，那么它之前所存在的?容器的空间就不存在了，?此时?元素就会认为????没有任何内容，于是，?容器则没有?度，从?影响页?布局。(同情况?)
如何清除浮动？别着急，现在企业??采?的清除浮动?法综合法，?名内墙法2.0.元素的类名:after{content:”.”;display:block;clear:both;height:0;overflow:hidden;visibility:hidden;}
给浮动塌陷的盒?添加?个：after伪类
这种?法在各个?型项?上都有出现过，可谓清除浮动的万?油呀！
浮动从何?来我们为何要清除浮动清除浮动的原理是什么浮动(float)，?个我们即爱?恨的属性。爱，因为通过浮动，我们能很?便地布局；
恨，浮动之后遗留下来太多的问题需要解决，特别是IE6-7（以下?特殊说明均指windows平台的IE浏览器）。也许很多?都有这样的疑问，浮动从何?来？我们为何要清除浮动？清除浮动的原理是什么？本?将?步?步地深?剖析其中的奥秘，让浮动使?起来更加得?应?。
?、清除浮动
还是
闭合浮动
（EnclosingfloatorClearingfloat）？
很多?都已经习惯称之为清除浮动，以前我也?直这么叫着，但是确切地来说是不准确的。我们应该?严谨的态度来对待代码，也能更好地帮助我们理解开头的三个问题。
1）清除浮动：清除对应的单词是clear，对应CSS中的属性是clear：left|right|both|none；
2）闭合浮动：更确切的含义是使浮动元素闭合，从?减少浮动带来的影响。
两者的区别
请看优雅的Demo通过以上实例发现，其实我们想要达到的效果更确切地说是闭合浮动，?不是单纯的清除浮动，在footer上设置clear：both清除浮动并不能解决warp?度塌陷的问题。
结论：?闭合浮动?清除浮动更加严谨，所以后?中统?称之为：闭合浮动。
?、为何要清除浮动？
要解答这个问题，我们得先说说CSS中的定位机制：普通流，浮动，绝对定位
（其中"position:fixed"是"position:absolute"的?个?类）。
1）普通流：很多?或者?章称之为?档流或者普通?档流，其实标准?根本就没有这个词。如果把?档流直译为英?就是documentflow，但标准?只有另?个词，叫做
普通流
（normalflow)，或者称之为常规流。但似乎?家更习惯?档流的称呼，因为很多中?翻译的书就是这么来的。?如《CSSMastery》，英?原书中?始?终都只有普通流normalflow（普通流）
这?词，从来没出现过documentflow（?档流）
2）浮动：浮动的框可以左右移动，直?它的外边缘遇到包含框或者另?个浮动框的边缘。浮动框不属于?档中的普通流，当?个元素浮动之后，不会影响到
块级框的布局?只会影响内联框（通常是?本）的排列，?档中的普通流就会表现得和浮动框不存在?样，当浮动框?度超出包含框的时候，也就会出现包含框不会
?动伸?来闭合浮动元素（“?度塌陷”现象）。顾名思义，就是漂浮于普通流之上，像浮云?样，但是只能左右浮动。
正是因为浮动的这种特性，导致本属于普通流中的元素浮动之后，包含框内部由于不存在其他普通流元素了，也就表现出?度为0（?度塌陷）。在实际布局中，往往这并不是我们所希望的，所以需要闭合浮动元素，使其包含框表现出正常的?度。
绝对定位就不多说了，不在本?讨论范围之内，下回分解。
三、清除浮动的原理——了解hasLayout和Blockformattingcontexts先看?下清理浮动的各种?法：
1）添加额外标签
这是在学校?师就告诉我们的?种?法，通过在浮动元素末尾添加?个空的标签例如，其他标签br等亦可。
复制代码代码如下:
缺点：可以想象通过此?法，会添加多少?意义的空标签，有违结构与表现的分离，在后期维护中将是噩梦，这是坚决不能忍受的，所以你看了这篇?章之后还是建议不要?了吧。
2）使?br标签和其??的html属性
这个?法有些?众，br有clear=“all|left|right|none”属性
[code]
缺点：同样有违结构与表现的分离，不推荐使?
3)?元素设置overflow：hidden通过设置?元素overflow值设置为hidden；在IE6中还需要触发hasLayout，例如zoom：1；
复制代码代码如下:
缺点：内容增多时候容易造成不会?动换?导致内容被隐藏掉，?法显?需要溢出的元素；04年POPO就发现overflow:hidden会导致中键失效，这是我作为?个多标签浏览控所不能接受的。所以还是不要使?了
4)?元素设置overflow：auto属性
同样IE6需要触发hasLayout，演?和3差不多
优点：不存在结构和语义化问题，代码量极少
缺点：多个嵌套后，firefox某些情况会造成内容全选；IE中mouseover造成宽度改变时会出现最外层模块有滚动条等，firefox早期版本会?故产?focus等,请看
嗷嗷的Demo,不要使?
5）?元素也设置浮动
优点：不存在结构和语义化问题，代码量极少
缺点：使得与?元素相邻的元素的布局会受到影响，不可能?直浮动到body，不推荐使?
6）?元素设置display:table优雅的Demo优点：结构语义化完全正确，代码量极少
缺点：盒模型属性已经改变，由此造成的?系列问题，得不偿失，不推荐使?
7）使?:after伪元素
需要注意的是:after是伪元素（Pseudo-Element），不是伪类（某些CSS?册??称之为“伪对象”），很多清除浮动?全之类的?章都称之为伪类，不过csser要严谨?点，这是?种态度。
由于IE6-7不?持:after，使?zoom:1触发hasLayout。
该?法源?于:HowToClearFloatsWithoutStructuralMarkup原?全部代码如下:复制代码代码如下:
优点：结构和语义化完全正确,代码量居中
缺点：复??式不当会造成代码量增加
?结
通过对?，我们不难发现，其实以上列举的?法，??有两类：
其?，通过在浮动元素的末尾添加?个空元素，设置clear：both属性，after伪元素其实也是通过content在元素的后??成了内容为?个点的块级元素；
其?，通过设置?元素overflow或者display：table属性来闭合浮动，我们来探讨?下这??的原理。
在CSS2.1??有?个很重要的概念，但是国内的技术博客介绍到的?较少，那就是Blockformattingcontexts（块级格式化上下?），以下简称BFC。
CSS3??对这个规范做了改动，称之为：flowroot，并且对触发条件进?了进?步说明。
那么如何触发BFC呢？
float除了none以外的值
overflow除了visible以外的值（hidden，auto，scroll）
display(table-cell，table-caption，inline-block)position（absolute，fixed）
fieldset元素
需要注意的是，display:table本?并不会创建BFC，但是它会产?匿名框(anonymousboxes)，?匿名框中的display:table-cell可以创建新的BFC，换句话说，触发块级格式化上下?的是匿名框，?不是display:table。所以通过display:table和display:table-cell创建的BFC效果是不?样的。
fieldset元素在www.w3.org??前没有任何有关这个触发?为的信息，直到HTML5标准?才出现。有些浏览器bugs（Webkit，Mozilla）提到过这个触发?为，但是没有任何官?声明。实际上，即使fieldset在?多数的浏览器上都能创建新的块级格式化上下?，开发者也不应该把这当做是理所当然的。CSS2.1没有定义哪种属性适?于表单控件，也没有定义如何使?CSS来给它们添加样式。?户代理可能会给这些属性应?CSS属性，建议开发者们把这种?持当做实验性质的，更?版本的CSS可能会进?步规范这个。
BFC的特性：
1)块级格式化上下?会阻?外边距叠加
当两个相邻的块框在同?个块级格式化上下?中时，它们之间垂直?向的外边距会发?叠加。换句话说，如果这两个相邻的块框不属于同?个块级格式化上下?，那么它们的外边距就不会叠加。
2)块级格式化上下?不会重叠浮动元素
根据规定，?个块级格式化上下?的边框不能和它??的元素的外边距重叠。这就意味着浏览器将会给块级格式化上下?创建隐式的外边距来阻?它和浮动元素的外边距叠加。由于这个原因，当给?个挨着浮动的块级格式化上下?添加负的外边距时将会不起作?（Webkit和IE6在这点上有?个问题——可以看这个测试?例）。
3)块级格式化上下?通常可以包含浮动
详见：W3CCSS2.1-10.6.7"Auto"heightsforblockformattingcontextroots通俗地来说：创建了BFC的元素就是?个独?的盒?，??的?元素不会在布局上影响外?的元素，反之亦然，同时BFC任然属于?档中的普通流。
?此，您或许明?了为什么overflow:hidden或者auto可以闭合浮动了，真是因为?元素创建了新的BFC。对于张鑫旭在对《overflow与zoom”清除浮动”的?些认识
》??中对于?包裹来解释闭合浮动的原理，我觉得是不够严谨的，?且没有依据。并且说道“Firefox等浏览器并没有haslayout的概念”，那么现代浏览器是有BFC的，从表现上来说，hasLayout可以等同于BFC。
IE6-7的显?引擎使?的是?个称为布局（layout）的内部概念，由于这个显?引擎??存在很多的缺陷，直接导致了IE6-7的很多显?bug。当我们说?个元素“得到layout”，或者说?个元素“拥有layout”的时候，我们的意思是指它的微软专有属性hasLayouthttp://msdn.microsoft.com/worksh...rties/haslayout.asp为此被设为了true。IE6-7使?布局的概念来控制元素的尺?和定位，那些拥有布局（havelayout）的元素负责本?及其?元素的尺?设置和定位。如果?个元素的hasLayout为false，那么它的尺?和位置由最近拥有布局的祖先元素控制。
触发hasLayout的条件：
position:absolutefloat:left|rightdisplay:inline-blockwidth:除“auto”外的任意值
height:除“auto”外的任意值
（例如很多?清除浮动会?到height:1%）
zoom:除“normal”外的任意值(MSDN)http://msdn.microsoft.com/worksh...properties/zoom.aspwriting-mode:tb-rl(MSDN)http://msdn.microsoft.com/worksh...ies/writingmode.asp在IE7中，overflow也变成了?个layout触发器：
overflow:hidden|scroll|auto（这个属性在IE之前版本中没有触发layout的功能。）
overflow-x|-y:hidden|scroll|auto（CSS3盒模型中的属性，尚未得到浏览器的?泛?持。他们在之前IE版本中同样没有触发layout的功能）
hasLayout更详细的解释请参见old9翻译的?名??的《Onhavinglayout》??（英?原?：http://www.satzansatz.de/cssd/onhavinglayout.htm），由于old9博客被墙，中?版地址：
IE8使?了全新的显?引擎，据称不使?hasLayout属性了，因此解决了很多深恶痛绝的bug。
综上所述：
在?持BFC的浏览器（IE8+，firefox，chrome，safari）通过创建新的BFC闭合浮动；
在不?持BFC的浏览器
（IE6-7），通过触发hasLayout闭合浮动。
四、闭合浮动?法——精益求精
上?已经列举了7种闭合浮动的?法，通过第三节分析的原理，我们发现其实更多的：display：table-cell，display：inline-block等只要触发了BFC的属性值都可以闭合浮动。从各个???较，after伪元素闭合浮动?疑是相对?较好的解决?案了，下?详细说说该?法。
复制代码代码如下:.clearfix:after{content:".";display:block;height:0;visibility:hidden;clear:both;}.clearfix{*zoom:1;}1)display:block使?成的元素以块级元素显?,占满剩余空间;2)height:0避免?成内容破坏原有布局的?度。
3)visibility:hidden使?成的内容不可见，并允许可能被?成内容盖住的内容可以进?点击和交互;4）通过content:"."?成内容作为最后?个元素，?于content??是点还是其他都是可以的，例如oocss??就有经典的content:"XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",有些版本可能content??内容为空,?丝冰凉是不推荐这样做的,firefox直到7.0content:”"仍然会产?额外的空隙；
5）zoom：1触发IEhasLayout。
通过分析发现，除了clear：both?来清除浮动的，其他代码??都是为了隐藏掉content?成的内容，这也就是其他版本的闭合浮动为什么会有font-size：0，line-height：0。
精益求精?案?：
相对于空标签闭合浮动的?法代码似乎还是有些冗余，通过查询发现Unicode字符?有?个“零宽度空格”，也就是U+200B，这个字符本?是不可见的，所以我们完全可以省略掉visibility:hidden了
复制代码代码如下:.clearfix:after{content:"\200B";display:block;height:0;clear:both;}.clearfix{*zoom:1;}.精益求精?案?：
由NicolasGallagher?湿提出来的,原?:Anewmicroclearfixhack，该?法也不存在firefox中空隙的问题。
复制代码代码如下:/*Formodernbrowsers*/.cf:before,.cf:after{content:"";display:table;}.cf:after{clear:both;}/*ForIE6/7(triggerhasLayout)*/.cf{zoom:1;}需要注意的是：
上?的?法?到了
：before伪元素，很多?对这个有些迷惑，到底我什么时候需要?before呢？为什么?案?没有呢？其实它是?来处理margin边距重叠的，由于内部元素float创建了BFC，导致内部元素的margin-top和
上?个盒?的margin-bottom发?叠加。如果这不是你所希望的，那么就可以加上before，如果只是单纯的闭合浮动，after就够了！并不是如同?漠《ClearFloat》??所说的：但只使?clearfix:after时在跨浏览器兼容问题会存在?个垂直边距叠加的bug，这不是bug，是BFC应该有的特性。
在实际开发中，改进?案?由于存在Unicode字符不适合内嵌CSS的GB2312编码的页?，使??案7完全可以解决我们的需求了，改进?案?等待?家的进?步实践。?案3、4通过overflow闭合浮动，实际上已经创建了新的块级格式化上下?，这将导致其布局和相对于浮动的?为等发??系列的变化，清除浮动只不过是?系列变化中的?个作??已。所以为了闭合浮动去改变全局特性，这是不明智的，带来的风险就是?系列的bug，?如firefox早期版本产?focus，截断绝对定位的层等等。始终要明?，如果单单只是需要闭合浮动，overflow就不要使?，?不是某些?章所说的“慎?”。
前前后后花了三天写完了这篇?章。如果觉得本?对您有帮助，您的留?就是对我最?的?持，同时由于精?有限，欢迎指出?中错误与不?，共勉之！
CSS3中三种清除浮动（float）影响的?式float是HTML中布局的??关键，很多难题?旦?上float都能很愉快地解决。但是凡是好?的，也容易出错。?如当?元素都为float时，其?元素会受影响，或者偶尔会发现??某个div的?度变成了0等等。float的特性1.?字环绕?字环绕效果是很明显的，这?要注意?个地?:浮动的块虽然脱离的正常的?档流，但是还会占有正常?档流的?本空间，可以看到上?第?种图，p的区域其实是顶到了img的底下的，因为float让img脱离?档流，但是p上的?字却没有顶过去，也就是说p上的?部分?字空间仍然被img占据着，所以从这?也可以看出float的脱离?档流不是完全脱离。2.包裹性所谓的包裹性是指，使?float的元素会?动加上?个块级框，也就是可以像块级元素那样设置宽?float的破坏性主要是指它会使?容器的?度塌陷，也就是?元素在?度计算的时候会忽略浮动的元素。正是由于这个破坏性，为了布局能正常布局，经常需要清除浮动。清除浮动并不是清理??的浮动的效果，?是清理上?接触到的浮动元素的浮动，使浮动元素后?的元素不接受它们的浮动，按照正常的元素流进?布局。下?介绍清除浮动的三个?式：1.增加?个空的标签（div或br等都?），通过clear：both语句消除float对后?元素的影响。.main{float:left;}.side{float:right;}.footer缺点：需要加很多?意义的标签，对后期维护不利。如果是?程序，那没关系，但如果是??程，还是慎?。2.使?:after伪元素.clearIt{zoom:1;}.clearIt:before;
/*加上before可以防?浏览器顶部的空?崩溃（就是上?个div的margin-bottom和下边的margin-top会发?叠加）*/.clearIt:after{content:".";display:block;
height:0;visibility:hidden;
clear:both;}/*display:block使?成的元素以块级元素显?,占满剩余空间;height:0避免?成内容破坏原有布局的?度。visibility:hidden使?成的内容不可见，并允许可能被?成内容盖住的内容可以进?点击和交互;通过content:"."?成内容作为最后?个元素，?于content??是点还是其他都是可以的，例如oocss??就有经典的content:"XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",有些版本可能content??内容为空,?丝冰凉是不推荐这样做的,firefox直到7.0content:”"仍然会产?额外的空隙；zoom：1触发IEhasLayout。*/3.在?元素设置overflow：auto.main{float:left;}.side{float:right;}.footer
清除浮动的方法
清除浮动：解决元素布局混乱的有效方法
清除浮动是Web开发中常见的一种技术，用于解决元素布局混乱的问题。它可以有效的将元素浮动的行为清除，使得后续的元素可以正确的排列出来。
要明白清除浮动的原理，需要了解浮动的本质。浮动元素的本质就是浮动在文档流外的元素，它脱离文档流，不会被后面的元素所遮挡，也不会影响前面元素的布局。浮动元素可以自行定位，可以让文档流中的元素围绕它而流动，从而使得文档中的元素能够按照预期的布局排列。
因此，要清除浮动，就要让浮动的元素重新回到文档流，使它能够和其他元素一起继续文档流的布局。最常用的清除浮动的方法有以下几种：
（1）使用clear:both属性清除浮动：在需要清楚浮动的元素中添加clear：both属性，可以强制该元素清除浮动，使其回归文档流。
（2）使用伪元素清除浮动：可以通过设置伪元素，让它清除浮动，使元素回归文档流。
（3）使用overflow清除浮动：可以将父元素的overflow设置为
hidden，可以让元素隐藏，从而清除浮动。
（4）使用空标签清除浮动：可以在浮动元素后面添加一个空标签，该标签拥有清除浮动的作用。
清除浮动是解决元素布局混乱的有效方法，使用上述方法都可以有效的清除浮动。此外，还可以使用CSS3新增的flex属性，可以更高效的解决浮动的问题，使得页面布局更加清晰。
清除浮动的?种?法标准流：盒?会各占整?位置。?盒?若是标准流，?盒?虽然没有?度，但是会撑开?盒??度。
浮动：盒?浮了起来，不会占据原来的位置，若?盒?没有定义?度，则不会撑开?盒?，?盒
??度为0。（浮动可以让多个块级元素在??显?，且块与块之间没有空隙，但要注意给?盒?清除浮动，否则?盒?不会被撑开）。为什么要清除浮动呢？清除浮动的本质是什么？ 清除浮动主要是为了解决?级元素因为?级浮动引起的内部?度为0的问题。清除浮动的?法：1.额外标签法：给谁清除浮动，就在其后额外添加?个空?标签
。优点：通俗易懂，书写?便。（不推荐使?）缺点：添加许多?意义的标签，结构化?较差。给元素small清除浮动（在small后添加?个空?标签clear(类名可以随意），设置clear:both;即可）2.?级添加overflow?法：可以通过触发BFC的?式，实现清楚浮动效果。优点：代码简洁（慎重使?，若该?盒??还有position定位会引起?烦）缺点：内容增多时候容易造成不会?动换?导致内容被隐藏掉，?法显?需要溢出的元素。注意：别加错位置，是给?亲加（并不是所有的浮动都需要清除，谁影响布局，才清除谁。）3.使?after伪元素清除浮动：：after?式为空元素的升级版，好处是不?单独加标签了。（较常?）优点：符合闭合浮动思想，结构语义化正确缺点：由于IE6-7不?持：after，使?zoom：1，触发hasLayout。注意：这个也是给?亲添加clearfix4.使?before和after双伪元素清除浮动：（较常?）注意：是给?亲添加clearfix
浮动的清除--四种?法浮动的清除--四种?法前?--?个?亲不能被??浮动的??，撑出?度。开胃?菜来看?个实验：现在有两个div，div?上没有任何属性。每个div中都有li，这些li都是浮动的。我们本以为这些li，会分为两排，但是，第?组中的第1个li，去贴靠第?组中的最后?个li了。第?个div中的li，去贴第?个div中最后?个li的边了。原因就是因为div没有?度，不能给??浮动的孩?们，?个容器。清除浮动?法1:给浮动的元素的祖先元素加上?度如果?个元素要浮动,那么它的祖先元素?定要有?度.?度的盒?,才能关住浮动只要浮动在?个有?度的盒?中,那么这个浮动就不会影响后?的浮动元素.所以就是清除浮动带来的影响了.清除浮动的?法2:clear:both;?页制作中,?度height很少出现.为什么?因为能被内容撑?!那么也就是说,刚才我们讲解的?法1,?作中?的极少.
clear:both;clear就是清除,both指的是左浮动,右浮动都要清除.意思就是:清除别?对我的影响.这个?法有?个?常?的,并且致命的问题,margin失效了!清除浮动?法3:隔墙法与内墙法隔墙法
该?法通过div.clh16这堵墙将两个?类分隔,弥补了clear:both?法中margin?效的情况,可以通过设置墙的?度来控制间隙
弊端:?页渲染后,两个分隔的?类不会有?度内墙法
顾名思义,将墙修在了?类??清除浮动?法4:overflow:hidden;overflow:hidden;的本意是将超出?类的部分隐藏
?个?亲不能被??浮动的??，撑出?度。但是，只要给?亲加上overflow:hidden;那么，?亲就能被??撑出?了。这是?个偏?清除浮动的最后总结1）
加?法：浮动的元素，只能被有?度的盒?关住。
也就是说，如果盒?内部有浮动，这个盒?有?，那么妥妥的，浮动不会互相影响。但是，?作上，我们绝对不会给所有的盒?加?度，这是因为?烦，并且不能适应页?的快速变化。1→
设置height234567→
设置height8910112.clear:both;法最简单的清除浮动的?法，就是给盒?增加clear:both；表???的内部元素，不受其他盒?的影响。1234567→clear:both;891011浮动确实被清除了，不会互相影响了。但是有?个问题，就是margin失效。两个div之间，没有任何的间隙了。3）隔墙法：在两部分浮动元素中间，建?个墙。隔开两部分浮动，让后?的浮动元素，不去追前?的浮动元素。墙???的?体当做了间隙。12345678910111213我们发现，隔墙法好?，但是第?个div，还是没有?度。如果我们现在想让第?个div，?动的根据??的??，撑出?度，我们就要想?些“?伎俩”，“奇淫技巧”。内墙法：123456789101112内墙法的优点就是，不仅仅能够让后部分的p不去追前部分的p了，并且能把第?个div撑出?度。这样，这个div的背景、边框就能够根据p的?度来撑开了。4）overflow:hidden;这个属性的本意，就是将所有溢出盒?的内容，隐藏掉。但是，我们发现这个东西能够?于浮动的清除。我们知道，?个?亲，不能被??浮动的??撑出?度，但是，如果这个?亲加上了overflow:hidden；那么这个?亲就能够被浮动的??撑出?度了。这个现象，不能解释，就是浏览器的?偏?。并且,overflow:hidden;能够让margin?效。
清除浮动的方法
清除浮动：有效的方法
浮动是网页布局中一种技术，它可以让元素从其正常的文档流中脱离出来，悬浮于其他元素之上，它是网页布局中经常使用的技术。然而，当元素浮动时，它会影响其他元素的布局，导致一些问题，如父元素的高度塌陷等，因此，清除浮动也是网页布局中非常重要的一步。
那么，有哪些有效的清除浮动的方法呢？
首先，我们可以使用CSS的clear属性来清除浮动。这是清除浮动的最简单、最常用的方法，在元素上添加clear：both即可。
其次，我们可以使用空标签来清除浮动。这种方法也很简单，只需要在浮动元素的后面添加一个空标签，就可以清除浮动了。
此外，也可以使用父元素的overflow属性来清除浮动。我们可以将父元素的overflow属性设置为hidden或auto，以便清除浮动。
最后，我们也可以使用CSS的after伪元素来清除浮动。这种方法也很实用，只需要在浮动元素的后面添加一个after伪元素，就可以清除浮动了。
以上就是有效的清除浮动的几种方法，在使用这些方法时，要根据
实际情况选择合适的方法，以便达到最佳的清除浮动效果。
清除浮动的?种?法浮动带来的问题?个元素设置了浮动之后，就脱离了标准流(漂浮在标准流之上)，因此如果他的?级容器在此时没有设置固定的?度，即由内容撑开，就会导致?级容器不能被撑开。?此时与?级容器同级的其他元素就会上移占据?级容器的位置。即?度塌陷。清除浮动的?法
（1）定?法：强?给?元素添加?个固定的?度；缺点：?度固定，导致后期不好维护。
（2）额外标签法：在最后?个元素后?添加?个空的块级元素（div），给该元素添加clear：both属性;该?法可以实现?度?适应，但每清除?次浮动，就要添加?个额外的标签，增加代码冗余。（3）伪元素清除浮动法：将清除浮动的相关代码写在.clearfix类中，给浮动元素的?元素添加.clearfix类即可.clearfix:before,.clearfix:after{content:"";/*由于伪元素默认显?模式是?内模式
所以要转换*/display:table;}.clearfix:after{/*清除浮动*/clear:both;}（4）overflow:hidden/auto清除浮动：给浮动元素的?元素添加overflow：hidden/auto即可，但是该?法的使?有局限性，在有些场景?不能使?。例如：如果有?个元素基于?元素定位，并且是定位在?元素盒?的外?，那么此时使?overflow：hidden清除浮动，也会将定位元素清除掉。清除浮动?法的实质上述清除浮动的?法实际上可以分为两类：?是利?clear属性，包括在浮动元素末尾添加?个带有clear:both属性的空
的块级元素（div），其实利?:after伪元素的?法也是在元素末尾添加?个内容为?个点并带有clear:both属性的元素实现的。?是触发浮动元素?元素的BFC(BlockFormattingContexts,块级格式化上下?)，使得该?元素可以包含浮动元素。什么是BFCBFC：块级格式化上下?，是?个独?的渲染区域，简单的理解就是?个独?的盒?，这个盒??的布局不会受到外部的影响，也不会影响外部元素。BFC规则（1）内部的Box会在垂直?向上?个接?个的放置（2）垂直?向上的距离由margin决定。（完整的说法是：属于同?个BFC的两个相邻Box的margin会发?重叠（塌陷），与?向?关。）（3）每个元素的左外边距与包含块的左边界相接触（从左向右），即使浮动元素也是如此。（这说明BFC中?元素不会超出他的包含块，?position为absolute的元素可以超出他的包含块边界）（4）BFC的区域不会与float的元素区域重叠（5）计算BFC的?度时，浮动?元素也参与计算=>解决元素?度塌陷问题（6）BFC就是页?上的?个隔离的独?容器，容器??的?元素不会影响到外?元素，反之亦然
常见触发BFC的?式（1）float的值不为none；（2）overflow的值不为visible；（3）display的值为inline-block、table-cell、table-caption和table；able也认为可以?成BFC，其实这?的主要原因在于Table会默认?成?个匿名的table-cell，正是这个匿名的table-cell?成了BFC。（4）position的值为absolute或fixed
相关热词搜索： 浮动后要注意清除浮动 浮动 要注意 清除版权所有:巨匠文档网 2010-2024 未经授权禁止复制或建立镜像[巨匠文档网]所有资源完全免费共享
Powered by 巨匠文档网 © All Rights Reserved.。冀ICP备20016797号