清除浮动的影响的方法3篇

篇一：清除浮动的影响的方法

　　

　　清除浮动的?种?法浮动带来的问题?个元素设置了浮动之后，就脱离了标准流(漂浮在标准流之上)，因此如果他的?级容器在此时没有设置固定的?度，即由内容撑开，就会导致?级容器不能被撑开。?此时与?级容器同级的其他元素就会上移占据?级容器的位置。即?度塌陷。清除浮动的?法

　　（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

篇二：清除浮动的影响的方法

　　

　　清除浮动的方法

　　清除浮动是清除布局中出现的浮动效果的方法。浮动是一种布局方式，它使某个元素从文档流中浮出，类似于图片的文本环绕，以便让元素可以放置在其他元素的旁边。但是，如果浮动元素不能正确清除，它会影响其他元素的布局，导致其他元素错位，甚至无法正常显示。

　　那么，如何清除浮动呢？常见的清除浮动的方法有以下几种：

　　首先，使用clearfix类。clearfix类是一种CSS技术，它可以清除浮动，让元素可以正常显示。只要在需要清除浮动的元素上添加clearfix类，就可以清除浮动，让元素正常显示。

　　其次，使用overflow属性。overflow属性可以指定元素的溢出如何处理，如果设置为hidden，则可以清除浮动。

　　再次，使用伪元素。浮动元素会影响父元素的高度，但是父元素可以使用伪元素来清除浮动，使其高度正常。

　　最后，使用float方法。float方法可以将元素的浮动状态取消，从而清除浮动，让元素正常显示。

　　总之，清除浮动有很多方法，可以根据实际情况选择适合的方法，从而解决浮动元素带来的布局问题。

篇三：清除浮动的影响的方法

　　

　　清除浮动有哪?种?法清除浮动的?的：为了解决?级元素因为?级浮动引起的内部?度为零的问题清除浮动的?法（最常?的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.

推荐访问:清除浮动的影响的方法 浮动 清除 影响