清除BLOCK元素浮动的三种方法
几种常用的清除浮动方法
⼏种常⽤的清除浮动⽅法1、⽗级div定义伪类：after和zoom<style type="text/css">.div1{background:#000080;border:1px solid red;}.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}.left{float:left;width:20%;height:200px;background:#DDD}.right{float:right;width:30%;height:80px;background:#DDD}/*清除浮动代码*/.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}.clearfloat{zoom:1}</style><div class="div1 clearfloat"><div class="left">Left</div><div class="right">Right</div></div><div class="div2">div2</div>原理：IE8以上和⾮IE浏览器才⽀持:after，原理和⽅法2有点类似，zoom(IE转有属性)可解决ie6,ie7浮动问题优点：浏览器⽀持好，不容易出现怪问题（⽬前：⼤型⽹站都有使⽤，如：腾迅，⽹易，新浪等等）缺点：代码多，不少初学者不理解原理，要两句代码结合使⽤，才能让主流浏览器都⽀持建议：推荐使⽤，建议定义公共类，以减少CSS代码评分：★★★★☆2.在结尾处添加空div标签clear:both<style type="text/css">.div1{background:#000080;border:1px solid red}.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}.left{float:left;width:20%;height:200px;background:#DDD}.right{float:right;width:30%;height:80px;background:#DDD}/*清除浮动代码*/.clearfloat{clear:both}</style><div class="div1"><div class="left">Left</div><div class="right">Right</div><div class="clearfloat"></div></div><div class="div2">div2</div>原理：添加⼀个空div，利⽤css提⾼的clear:both清除浮动，让⽗级div能⾃动获取到⾼度优点：简单，代码少，浏览器⽀持好，不容易出现怪问题缺点：不少初学者不理解原理；如果页⾯浮动布局多，就要增加很多空div，让⼈感觉很不爽建议：不推荐使⽤，但此⽅法是以前主要使⽤的⼀种清除浮动⽅法评分：★★★☆☆3.⽗级div定义height<style type="text/css">.div1{background:#000080;border:1px solid red;/*解决代码*/height:200px;}.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}.left{float:left;width:20%;height:200px;background:#DDD}.right{float:right;width:30%;height:80px;background:#DDD}</style><div class="div1"><div class="left">Left</div><div class="right">Right</div></div><div class="div2">div2</div>原理：⽗级div⼿动定义height，就解决了⽗级div⽆法⾃动获取到⾼度的问题优点：简单，代码少，容易掌握缺点：只适合⾼度固定的布局，要给出精确的⾼度，如果⾼度和⽗级div不⼀样时，会产⽣问题建议：不推荐使⽤，只建议⾼度固定的布局时使⽤评分：★★☆☆☆4.⽗级div定义overflow:hidden<style type="text/css">.div1{background:#000080;border:1px solid red;/*解决代码*/width:98%;overflow:hidden}.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px;width:98%}.left{float:left;width:20%;height:200px;background:#DDD}.right{float:right;width:30%;height:80px;background:#DDD}</style><div class="div1"><div class="left">Left</div><div class="right">Right</div></div><div class="div2">div2</div>原理：必须定义width或zoom:1，同时不能定义height，使⽤overflow:hidden时，浏览器会⾃动检查浮动区域的⾼度优点：简单，代码少，浏览器⽀持好缺点：不能和position配合使⽤，因为超出的尺⼨的会被隐藏建议：只推荐没有使⽤position或对overflow:hidden理解⽐较深的朋友使⽤评分：★★★☆☆5.⽗级div定义overflow:auto<style type="text/css">.div1{background:#000080;border:1px solid red;/*解决代码*/width:98%;overflow:auto}.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px;width:98%}.left{float:left;width:20%;height:200px;background:#DDD}.right{float:right;width:30%;height:80px;background:#DDD}</style><div class="div1"><div class="left">Left</div><div class="right">Right</div></div><div class="div2">div2</div>原理：必须定义width或zoom:1，同时不能定义height，使⽤overflow:auto时，浏览器会⾃动检查浮动区域的⾼度优点：简单，代码少，浏览器⽀持好缺点：内部宽⾼超过⽗级div时，会出现滚动条。
清除浮动的5种方法
清除浮动的5种⽅法清除浮动⽅法.fix{*zoom:1}.fix:after{display:block; content:"clear"; height:0; clear:both; overflow:hidden; visibility:hidden;}⽅法⼀：使⽤带clear属性的空元素在浮动元素后使⽤⼀个空元素如<div class="clear"></div>，并在CSS中赋予.clear{clear:both;}属性即可清理浮动。
亦可使⽤<br class="clear" />或<hr class="clear" />来进⾏清理。
优点：简单，代码少，浏览器兼容性好。
缺点：需要添加⼤量⽆语义的html元素，代码不够优雅，后期不容易维护。
⽅法⼆：使⽤CSS的overflow属性给浮动元素的容器添加overflow:hidden;或overflow:auto;可以清除浮动，另外在 IE6 中还需要触发 hasLayout ，例如为⽗元素设置容器宽⾼或设置 zoom:1。
在添加overflow属性后，浮动元素⼜回到了容器层，把容器⾼度撑起，达到了清理浮动的效果。
⽅法三：给浮动的元素的容器添加浮动给浮动元素的容器也添加上浮动属性即可清除内部浮动，但是这样会使其整体浮动，影响布局，不推荐使⽤。
⽅法四：使⽤邻接元素处理什么都不做，给浮动元素后⾯的元素添加clear属性。
⽅法五：使⽤CSS的:after伪元素结合 :after 伪元素（注意这不是伪类，⽽是伪元素，代表⼀个元素之后最近的元素）和 IEhack ，可以完美兼容当前主流的各⼤浏览器，这⾥的 IEhack 指的是触发 hasLayout。
给浮动元素的容器添加⼀个clearfix的class，然后给这个class添加⼀个:after伪元素实现元素末尾添加⼀个看不见的块元素（Block element）清理浮动。
HTML清除浮动的其中两种方式
HTML清除浮动的其中两种⽅式⼀、清除浮动的⽅式⼀给前⾯⼀个⽗元素设置⾼度，注意：企业开发中能不写⾼度就不写⾼度<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>D131_ClearFloat</title><style>.smallbox1{width:100px;height:100px;background-color: red;boder:3px solid black;margin:5px;float:right;}.smallbox2{width:100px;height:100px;background-color: red;boder:3px solid black;margin:5px;}.smallbox3{width:100px;height:100px;background-color: red;boder:3px solid black;margin:5px;}.smallbox4{width:100px;height:100px;background-color: red;boder:3px solid black;margin:5px;}.smallbox5{width:100px;height:100px;background-color: red;boder:3px solid black;margin:5px;}.smallbox6{width:100px;height:100px;background-color: red;boder:3px solid black;margin:5px;}.bigbox1,.bigbox2{/*width:400px;*//*width:400px;*/background-color: green;border:3px black solid;}</style></head><body><div class="bigbox1"><div class="smallbox1"></div><div class="smallbox2"></div><div class="smallbox3"></div></div><div class="bigbox2"><div class="smallbox4"></div><div class="smallbox5"></div><div class="smallbox6"></div></div></body></html>⼆、清除浮动的第⼆种⽅式给后⾯的属性添加clear属性clear属性取值：none：默认取值，按照浮动元素的排序规则进⾏排序（左浮动找左浮动，右浮动找右浮动）left：不要找前⾯的左浮动元素right：不要找前⾯的右浮动元素both：不要找前⾯的左浮动和有浮动元素例如：我们不设置⼤盒⼦的宽⾼，⼩盒⼦会把⼤盒⼦撑起来，但是两个⼤盒⼦会因此⽽在⼀⾏上.smallbox1{width:100px;height: 100px;float:left;background-color: red;border:2px solid black;}.smallbox2{width:100px;height: 100px;float:left;background-color: red;border:2px solid black;}.smallbox3{width:100px;height: 100px;float:left;background-color:blue;border:2px solid black;}.smallbox4{width:100px;height: 100px;float:left;background-color: blue;border:2px solid black;}</style></head><body><div class="bigbox1"><div class="smallbox1"></div><div class="smallbox2"></div></div><div class="bigbox2"><div class="smallbox3"></div><div class="smallbox4"></div></div></body>我们使⽤clear属性在第三个⼩盒⼦上，这样就可以另起⼀⾏了（第四个就不⽤，因为我们就想让第三个挨着第四个），只需要第三个⼩盒⼦的代码修改代码.smallbox3{clear:left;width:100px;height: 100px;float:left;background-color:blue;border:2px solid black;}注意点：margin属性失效了，不失效的⽅式我们下次再说。
html5去浮动的方法
html5去浮动的方法摘要：1.HTML5 去浮动的方法概述2.浮动产生的原因3.去浮动的常用方法3.1 清除浮动（clearfix）3.2 使用伪元素（如：：after）3.3 利用BFC（Block Formatting Context）3.4 使用Flex 布局3.5 使用Grid 布局正文：【HTML5 去浮动的方法】在HTML5 中，浮动是一种常用的布局方式，可以让页面元素在不同方向上自动换行，实现复杂的页面布局。
然而，浮动也会导致一些问题，例如：元素重叠、外边距折叠等。
因此，了解如何去除浮动，恢复元素正常布局是非常重要的。
下面我们来介绍一下HTML5 中去浮动的常用方法。
【浮动产生的原因】浮动产生的原因是元素的“行框”（box）被移动到了一个新的位置，导致元素不再占据原来的空间。
这种移动通常是由于元素的父容器被其他浮动元素挤压，或者元素自身设置的浮动值导致的。
【去浮动的常用方法】1.清除浮动（clearfix）最常用的去除浮动的方法是清除浮动，即使用一个额外的元素来清除浮动。
通常这个元素是透明的，并且设置为绝对定位，覆盖在浮动元素之上。
这样，浮动元素就会“掉入”这个透明元素中，恢复原来的布局。
2.使用伪元素（如：：after）伪元素是一种用于添加CSS 样式的特殊元素，它们不是HTML 文档中的一部分，但可以被CSS 选择器选中。
我们可以使用伪元素来清除浮动。
例如，在浮动元素之后添加一个：after 伪元素，并设置它的内容为“”，样式为“clear: both;”。
这样，浮动元素就会“掉入”这个伪元素中，实现去浮动。
3.利用BFC（Block Formatting Context）BFC 是一个独立的布局环境，其中的元素布局不会受到外部元素的影响，反之亦然。
我们可以利用BFC 来限制浮动元素的移动，从而实现去浮动。
具体方法是将浮动元素的父容器设置为一个BFC，这样浮动元素就会受到限制，不再影响其他元素的布局。
取消浮动塌陷的方法
取消浮动塌陷的方法
取消浮动塌陷的方法有以下几种：
1. 父元素设置高度：如果一个元素要浮动，那么它的祖先元素一定要有高度。
高度的盒子，才能关住浮动。
只要浮动在一个有高度的盒子中，那么这个浮动就不会影响后面的浮动元素。
所以就是清除浮动带来的影响了。
2. 使用伪类after和clearfix：使用伪类:after和clearfix可以解决高度塌陷的问题。
具体做法是在父元素的样式中添加一个:after伪类，并设置其content属性为""，然后添加clearfix类。
3. BFC（Block Formatting Context）：BFC是一个防止高度塌陷的方法。
BFC可以防止垂直外边距叠加，并且可以防止元素脱离文档流。
要使用BFC，只需将父元素的display属性设置为block或inline-block，并将overflow 属性设置为hidden或auto。
4. 使用flex布局：Flex布局是一种现代的布局方式，可以轻松地解决高度
塌陷的问题。
将父元素设置为flex容器，然后使用justify-content和
align-items属性来对齐子元素。
5. 使用grid布局：Grid布局也是一种现代的布局方式，可以轻松地解决高度塌陷的问题。
将父元素设置为grid容器，然后使用grid-template-rows 和grid-template-columns属性来对齐子元素。
以上是几种常见的取消浮动塌陷的方法，可以根据具体情况选择适合的方法来解决高度塌陷的问题。
清理浮动的三种常用方法以及如何居中一个浮动元素
清理浮动的三种常⽤⽅法以及如何居中⼀个浮动元素千⾥之⾏始于⾜下今天看到⼀个题⽬说如何居中⼀个float:left的元素的题⽬，我蛮以为⽤margin:0 auto 就可以解决了。
然⽽，试验之后，发现事实并⾮如此，才发现⾃⼰对于这⽅⾯的知识竟是相当忙乱！于是撇下⼿头事务，翻书查资料温习了这部分‘简单’的内容。
并总结如下。
⼀、清理浮动的三种⽅法。
当给元素设置了float属性之后，我们知道，元素便会脱离⽂档流的束缚，像⼀⽚⽔中浮动的树叶随波逐流。
但是，在浮动的情况下，可能会导致⽹页内容出现⼀些我们并不想让其发⽣的⼲扰，例如其⽗元素的包裹作⽤将失去作⽤，假如你给⽗元素设置了漂亮的背景它却不见了，岂不惹⼈烦恼！于是，清理浮动属性带来的⼲扰就⼗分重要了。
我们常常有三种⽅法。
⽅法⼀：在浮动元素后⾯添加⼀个标签（例如<br/>），并给此标签设置clear:both;样式。
但是其缺点是会增加多于的⽆⽤的不必要标记。
今天在Stack Overflow上看到⼀个更简单的设置⽅式，我们可以增加以下样式：.clearfix:after {content:"";display:table;clear:both;}只是这种⽅法不⽀持IE6、7.注意，clearfix是插⼊到要清理浮动塌陷的⽗元素包裹层的类名。
对于IE7以下的浏览器，我们可以这样解决：.clearfix{*zoom:1;}⽅法⼆：给其⽗元素设置浮动属性，这样会使其⽗元素也拥有了这项技能，也就不会影响了~但是这种做法可能会导致其它不需要浮动⼦元素也受到其浮动的影响。
⽅法三：给其⽗元素设置overflow:hidden;样式，也能达到我们需要的效果。
其原理很简单，因为overflow属性定义在包含的内容对于指定的尺⼨太⼤的情况下元素应该如何反应，当其hidden的时候⽗元素的边框就会紧贴着⼦元素。
So,达到了我们需要的效果。
但是其会在某些情况下产⽣滚动条或者截断内容，当然这种情况我们⼤可以谨慎操作避免的。
清除浮动有哪几种方法
清除浮动有哪⼏种⽅法清除浮动的⽬的：为了解决⽗级元素因为⼦级浮动引起的内部⾼度为零的问题清除浮动的⽅法（最常⽤的4种）：1、额外标签法（在最后⼀个浮动标签后，新加⼀个标签，给其设置clear：both；）（不推荐）原因：如果我们清除了浮动，⽗元素⾃动检测⼦盒⼦最⾼的⾼度，然后与其同⾼。
优点：通俗易懂，⽅便缺点：添加⽆意义标签，语义化差2、⽗级添加overflow属性（⽗元素添加overflow:hidden）（不推荐）-->通过触发BFC⽅式，实现清除浮动优点：代码简洁缺点：内容增多的时候容易造成不会⾃动换⾏导致内容被隐藏掉，⽆法显⽰要溢出的元素3、使⽤after伪元素清除浮动（推荐使⽤）.clearfix:after {content: ".";/* 内容为⼩点，尽量加不要为空，否则旧版本的浏览器有空隙*/display: block;/* 转换为块元素*/height: 0;/* ⾼度为零*/visibility: hidden;/* 隐藏盒⼦*/clear: both;/* 清除浮动*/}.clearfix {*zoom: 1;/*兼容ie6/7*/}优点：符合闭合浮动思想，结构语义化正确缺点：ie6-7不⽀持伪元素：after，使⽤zoom:1触发hasLayout.4、使⽤before和after双伪元素清除浮动(强烈推荐使⽤).clearfix:before, .clearfix:after {content: "";display: table;}.clearfix:after {clear: both}.clearfix {*zoom: 1;/*兼容ie6/7*/}优点：代码更简洁缺点：⽤zoom:1触发hasLayout.。
清除浮动的三种方法
清除浮动的三种⽅法
在css中 clear 属性⽤于清除元素左右两侧浮动，常⽤属性值有 left (不允许左侧有浮动元素）right (不允许右侧有浮动元素）both (同时清除左右两侧浮动的影响)
注意: clear属性只能清除元素左右两侧浮动影响，但是在⽹页制作经常会遇到⼀些特殊的浮动影响。
例如对⼦元素设置浮动时，如果不对其⽗元素定义⾼度，则⼦元素的浮动会对⽗元素产⽣影响(⾼度塌陷）
01，使⽤空标记清除浮动
在浮动元素之后添加空标记，并对空标记应⽤ " clear:both "样式，可清除元素浮动产⽣影响。
空标记可以为 div,p,<hr/>等任何标记。
02，使⽤ overflow 属性清除浮动
对元素应⽤ " overflow : hidden " 样式也可以清除浮动对该元素影响。
该⽅法弥补空标记清除浮动的不⾜。
03，使⽤after伪对象清除浮动
必须为需要清除浮动的元素伪对象设置 "height:0",否则该元素会⽐其实际⾼度⾼出若⼲像素。
必须在伪对象中设置content属性，属性值可以为空，如" content:"" "。
.father:after{
display:block;
clear:both;
content: "";
visibility:hidden;
height:0;
}。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
应用DivCSS网页布局，经常性地会使用到float，很多邪门的事儿都有可能是浮动在作怪，清除浮动是必须要做的，而且随时性地对父级元素清除浮动的做法也被认为是书写CSS的良好习惯之一。
下面看今天的教程，此为未清除浮动源代码，运行代码无法查看到父级元素浅黄色背景。
<style type=”text/css”>
<!–
*{margin:0;padding:0;}
body{font:36px bold; color:#F00; text-align:center;}
#layout{background:#FF9;}
#left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;}
#right{float:right;width:30%;height:80px;background:#DDD;line-height:80px;}
–>
</style>
<div id=”layout”>
<div id=”left”>Left</div>
<div id=”right”>Right</div>
</div>
一、使用空标签清除浮动
我用了很久的一种方法，空标签可以是div标签，也可以是P标签。
我习惯用<div>，够简短，也有很多人用<hr>，只是需要另外为其清除边框，但理论上可以是任何标签。
这种方式是在需要清除浮动的父级元素内部的所有浮动元素后添加这样一个标签清楚浮动，并为其定义CSS代码：clear:both。
此方法的弊端在于增加了无意义的结构元素。
<style type=”text/css”>
<!–
*{margin:0;padding:0;}
body{font:36px bold; color:#F00; text-align:center;}
#layout{background:#FF9;}
#left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;}
#right{float:right;width:30%;height:80px;background:#DDD;line-height:80px;}
.clr{clear:both;}
–>
</style>
<div id=”layout”>
<div id=”left”>Left</div>
<div id=”right”>Right</div>
<div class=”clr”></div>
</div>
二、使用overflow属性
此方法有效地解决了通过空标签元素清除浮动而不得不增加无意代码的弊端。
使用该方
法是只需在需要清除浮动的元素中定义CSS属性：overflow:auto，即可！”zoom:1″用于兼容IE6。
<style type=”text/css”>
<!–
*{margin:0;padding:0;}
body{font:36px bold; color:#F00; text-align:center;}
#layout{background:#FF9;overflow:auto;zoom:1;}
#left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;}
#right{float:right;width:30%;height:80px;background:#DDD;line-height:80px;}
–>
</style>
<div id=”layout”>
<div id=”left”>Left</div>
<div id=”right”>Right</div>
</div>
三、使用after伪对象清楚浮动
该方法只适用于非IE浏览器。
具体写法可参照以下示例。
使用中需注意以下几点。
一、该方法中必须为需要清除浮动元素的伪对象中设置height:0，否则该元素会比实际高出若干像素；二、content属性是必须的，但其值可以为空，蓝色理想讨论该方法的时候content 属性的值设为”.”，但我发现为空亦是可以的。
<style type=”text/css”>
<!–
*{margin:0;padding:0;}
body{font:36px bold; color:#F00; text-align:center;}
#layout{background:#FF9;}
#layout:after{display:block;clear:both;content:”";visibility:hidden;height:0;}
#left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;}
#right{float:right;width:30%;height:80px;background:#DDD;line-height:80px;}
–>
</style>
<div id=”layout”>
<div id=”left”>Left</div>
<div id=”right”>Right</div>
</div>
此三种方法各有利弊，使用时应择优选择，比较之下第二种方法更为可取。