您的当前位置:首页正文

清除浮动(float)的影响_html/css

2022-06-15

浮动会导致父元素塌陷如图:

解决办法:

父元素overflow:hidden,如图

末尾插入子元素clear,如图

为甚么,父元素overflow:hidden会解决塌陷问题?

来自知乎貘吃馍香的回答

overflow:hidden 的意思是超出的部分要裁切隐藏掉

那么如果 float 的元素不占普通流位置 普通流的包含块要根据内容高度裁切隐藏

如果高度是默认值auto 那么不计算其内浮动元素高度就裁切

就有可能会裁掉float 这是反布局常识的。

-----------------------------分割线-------------------------------------

如果了解BFC这个问题也就迎刃而解了,看看BFC怎么说的。

BFC布局规范中,计算BFC的高度时,浮动元素也参与计算

overflow:hidden会创建BFC。

为甚么,末尾插入子元素clear会解决塌陷问题?

看一下什么是清楚浮动这问题也可以迎刃而解

来自官方文档:

如果声明为左边或右边清除,会使元素的上外边框边界刚好在该边上浮动元素的下外边距边界之下。

ok,好的基础才会走的更远。

小编还为您整理了以下内容,可能对您也有帮助:

Css—float的影响和解决方案

推荐俩种依靠clear属于清除浮动的方法,推荐第二种,探究的记录在后面,赶时间的看个开头就好了。

1. 在受浮动坍塌的父级元素结束标签前,添加一个高宽为0的空div,然后设置 clear:both

2 .创建一个clearfix样式,并使用伪类元素 after 添加样式到父元素上

无论是块级元素还是行内元素设置了浮动之后都会生成一个块级框,并且可以编辑它的宽高,此时该浮动元素就脱离了文档流。举个例子,把网页看成一个三维的泳池,文档流在泳池底部,给文档流中一个元素设置了float之后,它就从这个网页的泳池底部浮动到了水上。此时同级的块级元素会无视float元素在网页上的位置进行布局。但是行内元素并不会被遮挡,而是像和它一起浮在水面上一样环绕这个浮动元素。

根据前面介绍,元素设置float后好像会从网页上浮一样,脱离文档流。这样的话,如果父级元素原本没设置高度,计划用子元素撑开父级元素。此时子元素因为float上浮,则父级元素的高度就会因为自身没设置而坍塌。

来个示例 ( 下文都是依据这个示例来讨论,故先给出HTML结构和CSS样式 ):

让我们再打开开发者工具具体看看

然后让我们把父元素也一同浮动看看

例如:

此时背景色为粉色的 ch2 就会被浮动的 背景色半透明的ch1 覆盖,但是ch2的字体还是环绕着ch1

如果让ch2 也浮动,则ch1 和 ch2 就相当于一同浮起到这个网页泳池的水面上。

另外,ch2 虽然不浮动起来时会被 同级ch1遮挡,但是ch2 它内部的行内元素却是环绕 ch1 的 ,同时 ch2 内部的块级元素还是会被浮动起来的ch1遮挡。

解决父元素高度坍塌的问题,其实可以给父元素指定个高度,但这样就没有父元素高度自适应的意义了;另外全部元素一起浮动也能解决父元素坍塌,子元素被遮挡的问题,但这本质上只是将所有元素一起浮动到顶端,并没有解决问题,反而还会影响另外的元素排列。下面介绍clear属性来清除浮动

那我们先来看看 clear 属性有什么用

我们稍稍改动一下上面的例子在 ch2 下加一个 p 标签然,然后改动一下 ch1 和 ch2 的样式让它们俩高度不一样。

若此时我们给p元素也加上浮动呢?

样例:

浮动元素的特征、影响以及如何清理浮动、

特征:

1、浮动元素会脱离正常的文档流,按照其外边距指定的位置相对于它的上一个块级元素(或父元素)显示

2、浮动元素后面的块级元素的内容会向此浮动元素的外边距靠齐,但是边框和背景却忽略

3、浮动元素而向上一个任意非浮动元素靠齐

4、浮动元素后面的内联元素会向此浮动元素的外边距靠齐

float造成的影响:

1、对其父元素的影响

对于其父元素来说,元素浮动之后,它脱离当前正常的文档流,所以它也无法撑开其父元素,造成父元素的塌陷

2、对其兄弟元素(非浮动)的影响

如果兄弟元素为块级元素,该元素会忽视浮动元素的而占据它的位置,并且元素会处在浮动元素的下层,但它的内部文字和其他行内元素都会环绕浮动元素。如果如果兄弟元素为内联元素,则元素会环绕浮动元素排列。

3、对其兄弟元素(浮动)的影响

同一个方向的浮动元素:当一个浮动元素在浮动过程中碰到同一个方向的浮动元素时,它会紧跟在它们后面

反方向的浮动元素:互不影响,位于同一条水平线上,当空间不够时会被挤下

4、对子元素的影响

当一个元素浮动时,在没有清除浮动的情况下,它无法撑开其父元素,但它可以让自己的浮动子元素撑开它自身,并且在没有定义具体宽度情况下,使自身的宽度从100%变为自适应(浮动元素display:block)。其高度和宽度均为浮动元素高度和非浮动元素高度之间的最大值。

清除浮动指什么? 如何清除浮动? 两种以上方法

浮动:

浮动框不属于文档中的普通流,当一个元素浮动之后,不会影响到 块级框的布局而只会影响内联框(通常是文本)的排列,文档中的普通流就会表现得和浮动框不存在一样,当浮动框高度超出包含框的时候,也就会出现包含框不会 自动伸高来闭合浮动元素(“高度塌陷”现象)。正是因为浮动的这种特性,导致本属于普通流中的元素浮动之后,包含框内部由于不存在其他普通流元素了,也就表现出高度为0(高度塌陷)。在实际布局中,往往这并不是我们所希望的,所以需要闭合浮动元素,使其包含框表现出正常的高度。

清除浮动的方法:

1、添加空的div,对他进行清理:

缺点:增加了一个无意义的标签。

2、BFC清理浮动(BFC详解请看下面):在父容器中生成BFC。

触发BFC

float 除了none以外的值

overflow 除了visible 以外的值(hidden,auto,scroll )

display (table-cell,table-caption,inline-block, flex, inline-flex)

position值为(absolute,fixed)

局限性:使用BFC使用float的时候会使父容器长度缩短,而且还有个重要缺陷——父容器float解决了其塌陷问题,那么父容器的父容器怎么办?overflow属性会影响滚动条和绝对定位的元素;position会改变元素的定位方式,这是我们不希望的,display这几种方式依然没有解决低版本IE问题。。。

3、通用的清理浮动法案

方法1

.clearfix{

*zoom:1;

}

.clearfix:after{

content:"";

display:block;

clear:left;

}

方法2

.clearfix{

*zoom:1;

}

.clearfix:after{

content:"";

display:table;

clear:both;

}

虽然我们得出了一种浏览器兼容的靠谱解决方案,但这并不代表我们一定得用这种方式,很多时候我们的父容器本身需要position:absolute等形成了BFC的时候我们可以直接利用这些属性了,大家要掌握原理,活学活用。总而言之清理浮动两种方式:

1、利用 clear属性,清除浮动

2、使父容器形成BFC

有几种定位方式,分别是如何实现定位的,参考点是什么,使用场景是什么?

1、static:

默认值,没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index声明)。当你没有为一个元素(例如div)指定定位方式时,默认为static,也就是按照文档的流式(flow)定位,将元素放到一个合适的地方。所以在不同的分辨率下,采用流式定位能很好的自适合,取得相对较好的布局效果。

2、relative:

生成相对定位的元素,相对于其正常位置进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。在static的基础上,如果我想让一个元素在他本来的位置做一些调整(位移),我们可以将该元素定位设置为relative,同时指定相对位移(利用top,bottom,left,right)。有一点需要注意的是,相对定位的元素仍然在文档流中,仍然占据着他本来占据的位置空间——虽然他现在已经不在本来的位置了。绝对定位会使元素从文档流中被删除,结果就是该元素原本占据的空间被其它元素所填充。

3、fixed:

元素框的表现类似于将 position 设置为 absolute,不过其包含块是视窗本身。我们知道absolute定位的参照物是“上一个定位过的父元素(static不算)”,那么如果我想让一个元素定位的参照物总是整个文档(viewport),怎么办呢?答案是使用fixed定位,fixed定位的参照物总是当前的文档。利用fixed定位,我们很容易让一个div定位在浏览器文档的左上,右上等方位。比如你想添加一个信息提示的div,并将该div固定在右上方,你可以使用以下css

.element  {position:fixed;top:2%;right:2%; }

4、absolute:

生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。如果你想在一个文档(Document)中将一个元素放至指定位置,你可以使用absolute来定位,将该元素的position设置为absolute,同时使用top,bottom,left,right来定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

z-index 有什么作用? 如何使用?

当网页上出现多个由绝对定位(POSITION:absolute)或固定定位(POSITION:fixed)所产生的浮动层时,必然就会产生一个问题,就是当这些层的位置产生重合时,谁在谁的上面呢?或者说谁看得见、谁看不见呢?这时候就可以通过设置z-index的值来解决,这个值较大的就在上面,较小的在下面。z-index的意思就是在z轴的顺序,如果说网页是由x轴和y轴所决定的一个平面,那么z轴就是垂直于屏幕的一条虚拟坐标轴,浮动层就在这个坐标轴上,那么它们的顺序号就决定了谁上谁下了。

z-index没有单位,z-index:99;这样写就够了和定位一起用,绝对定位才可以触发z-index属性

position:relative和负margin都可以使元素位置发生偏移?二者有什么区别?

1、position:relative是相对定位可以使元素发生偏移,但是在文档流中,它仍然占据着原来的位置,所以其他元素的位置不会发生变化

2、负margin:通过负margin进行偏移的元素,它会放弃偏移前占据的空间,这样它后面文档流中的其它元素就会“流”过来填充这部分空间,所以其他元素的位置发生了变化。

css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响_百度...

不清除浮动的话,浮动层后面的非浮动内容就有可能被浮动层所覆盖,造成版面错乱,所以必须清除浮动。除非浮动层所在的位置是有固定的高度的,也就是说不管是否浮动它所占用的区域都不变,这样就无需清除。比如:

1
2
3
4

<div>
<div style="float:left; width:100px; height:100px; background-color:#f00"></div>
</div>
<div style="width:200px; height:200px; background-color:#00f"></div>

可以看到蓝色框会被红色框覆盖(IE6-9中则不会,因为它不是标准浏览器)。清除浮动以后就不会了:

1
2
3
4
5

<div>
<div style="float:left; width:100px; height:100px; background-color:#f00"></div>
<div style="clear:both"></div>
</div>
<div style="width:200px; height:200px; background-color:#00f"></div>

或者给浮动层预留位置:

1
2
3
4

<div style="width:100px; height:100px">
<div style="float:left; width:100px; height:100px; background-color:#f00"></div>
</div>
<div style="width:200px; height:200px; background-color:#00f"></div>

css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响_百度...

不清除浮动的话,浮动层后面的非浮动内容就有可能被浮动层所覆盖,造成版面错乱,所以必须清除浮动。除非浮动层所在的位置是有固定的高度的,也就是说不管是否浮动它所占用的区域都不变,这样就无需清除。比如:

1
2
3
4

<div>
<div style="float:left; width:100px; height:100px; background-color:#f00"></div>
</div>
<div style="width:200px; height:200px; background-color:#00f"></div>

可以看到蓝色框会被红色框覆盖(IE6-9中则不会,因为它不是标准浏览器)。清除浮动以后就不会了:

1
2
3
4
5

<div>
<div style="float:left; width:100px; height:100px; background-color:#f00"></div>
<div style="clear:both"></div>
</div>
<div style="width:200px; height:200px; background-color:#00f"></div>

或者给浮动层预留位置:

1
2
3
4

<div style="width:100px; height:100px">
<div style="float:left; width:100px; height:100px; background-color:#f00"></div>
</div>
<div style="width:200px; height:200px; background-color:#00f"></div>

CSS浮动和清除浮动?

清除浮动并不是指清除浮动元素本身的浮动,而是在浮动元素的外面(前面或后面)进行清除,也就是清除浮动元素对其他后续元素的影响。浮动元素相当于漂浮在空中,那么它原来在地面所占用的位置就被收回了,后面的其他元素就会自动占用这个位置(具体表现就类似于其他元素钻到这个浮动元素的下面去了),而清除浮动的意思就是把浮动元素原来在地面的占用位置找回来,这样后面的其他元素的位置就不会受这个浮动元素的影响了。

具体做法可以在浮动元素的后面插入一个块级元素来清除浮动,下面是最简单的一种:

<div class="d1"></div>

<div class="d2"></div>

<br style="clear:both"/>

<div class="d3"></div>

CSS浮动和清除浮动?

清除浮动并不是指清除浮动元素本身的浮动,而是在浮动元素的外面(前面或后面)进行清除,也就是清除浮动元素对其他后续元素的影响。浮动元素相当于漂浮在空中,那么它原来在地面所占用的位置就被收回了,后面的其他元素就会自动占用这个位置(具体表现就类似于其他元素钻到这个浮动元素的下面去了),而清除浮动的意思就是把浮动元素原来在地面的占用位置找回来,这样后面的其他元素的位置就不会受这个浮动元素的影响了。

具体做法可以在浮动元素的后面插入一个块级元素来清除浮动,下面是最简单的一种:

<div class="d1"></div>

<div class="d2"></div>

<br style="clear:both"/>

<div class="d3"></div>

css的浮动以及如何清除浮动

CSS清除浮动的3种方法,参考:http://www.apiref.com/css-zh/experience/skill.htm#no9

方法1:

#test{clear:both;}

#test为浮动元素的下一个兄弟元素

方法2:

#test{display:block;zoom:1;overflow:hidden;}

#test为浮动元素的父元素。zoom:1也可以替换为固定的width或height

方法3:

#test{zoom:1;}#test:after{display:block;clear:both;visibility:hidden;height:0;content:'';}

#test为浮动元素的父元素

css的浮动以及如何清除浮动

CSS清除浮动的3种方法,参考:http://www.apiref.com/css-zh/experience/skill.htm#no9

方法1:

#test{clear:both;}

#test为浮动元素的下一个兄弟元素

方法2:

#test{display:block;zoom:1;overflow:hidden;}

#test为浮动元素的父元素。zoom:1也可以替换为固定的width或height

方法3:

#test{zoom:1;}#test:after{display:block;clear:both;visibility:hidden;height:0;content:'';}

#test为浮动元素的父元素

CSS里怎么清除浮动

如果想要清楚浮动,那么首先你要弄清浮动产生的原因。本篇文章给大家归纳了浮动产生的原因以及副作用,还有最重要的,怎么清除浮动,清除浮动的方法。

一、浮动产生原因

一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSS float浮动就产生了。

本来两个黑色对象盒子是在红色盒子内,因为对两个黑色盒子使用了float浮动,所以两个黑色盒子产生了浮动,导致红色盒子不能撑开,这样浮动就产生了。

简单地说,浮动是因为使用了float:left或float:right或两者都是有了而产生的浮动。

二、浮动产生负作用

1、背景不能显示

由于浮动产生,如果对父级设置了(CSS background背景)CSS背景颜色或CSS背景图片,而父级不能被撑开,所以导致CSS背景不能显示。

2、边框不能撑开

如上图中,如果父级设置了CSS边框属性(css border),由于子级里使用了float属性,产生浮动,父级不能被撑开,导致边框不能随内容而被撑开。

3、margin padding设置值不能正确显示

由于浮动导致父级子级之间设置了css padding、css margin属性的值不能正确表达。特别是上下边的padding和margin不能正确显示。

三、css解决浮动,清除浮动方法

这里为了统一讲解浮动解决方法,假设了有三个盒子对象,一个父级里包含了两个子级,子级一个使用了float:left属性,另外一个子级使用float:right属性。同时设置div css border,父级css边框颜色为红色,两个子级边框颜色为蓝色;父级CSS背景样式为,两个子级背景为白色;父级css width宽度为400px,两个子级css宽度均为180px,两个子级再设置相同高度100px,父级css height高度暂不设置(通常为实际css布局时候这样父级都不设置高度,而高度是随内容增加自适应高度)。

父级CSS命名为“.div”对应html标签使用“<div class="div">”

两个子级CSS命名分别为“.div-left”“.div-right”

根据以上描述DIV给出对应CSS代码和HTML代码片段

CSS代码:

.div{ width:400px; border:1px solid #F00; background:#FF0}

.div-left,.div-right{ width:180px; height:100px;

border:1px solid #00F; background:#FFF}

.div-left{ float:left}

.div-right{ float:right}对应html源代码片段:

<div class="div">

<div class="div-left">left浮动</div>

<div class="div-right">right浮动</div>

</div>以下总结了几点用于清除浮动的经验教程

1、对父级设置适合CSS高度

对父级设置适合高度样式清除浮动,这里对“.div”设置一定高度即可,一般设置高度需要能确定内容高度才能设置。这里我们知道内容高度是100PX+上下边框为2px,这样具体父级高度为102px

CSS代码:

.div{ width:400px;border:1px solid #F00;background:#FF0; height:102px}

.div-left,.div-right{width:180px;height:100px;

border:1px solid #00F;background:#FFF}

.div-left{ float:left}

.div-right{ float:right}CSS高度设置清除浮动法

使用height高度清除浮动

小结,使用设置高度样式,清除浮动产生,前提是对象内容高度要能确定并能计算好。

2、clear:both清除浮动

为了统一样式,我们新建一个样式选择器CSS命名为“.clear”,并且对应选择器样式为“clear:both”,然后我们在父级“</div>”结束前加此div引入“class="clear"”样式。这样即可清除浮动。

具体CSS代码:

.div{ width:400px;border:1px solid #F00;background:#FF0}

.div-left,.div-right{width:180px;height:100px;

border:1px solid #00F;background:#FFF}

.div-left{ float:left}

.div-right{ float:right}

.clear{ clear:both}Html代码:

<div class="div">

<div class="div-left">left浮动</div>

<div class="div-right">right浮动</div>

<div class="clear"></div>

</div>使用CSS clear清除浮动

这个css clear清除float产生浮动,可以不用对父级设置高度 也无需技术父级高度,方便适用,但会多加CSS和HTML标签。

3、父级div定义 overflow:hidden

对父级CSS选择器加overflow:hidden样式,可以清除父级内使用float产生浮动。优点是可以很少CSS代码即可解决浮动产生。

overflow:hidden解决CSS代码:

.div{ width:400px;border:1px solid #F00;background:#FF0; overflow:hidden}

.div-left,.div-right{width:180px;height:100px;

border:1px solid #00F;background:#FFF}

.div-left{ float:left}

.div-right{ float:right}HTML代码不变。

为什么加入overflow:hidden即可清除浮动呢?那是因为overflow:hidden属性相当于是让父级紧贴内容,这样即可紧贴其对象内内容(包括使用float的div盒子),从而实现了清除浮动。Css overflow:hidden清除浮动方法推荐使用。

以上三点即是兼容各大浏览器清除浮动的方法,其它有的浏览器不兼容有的不兼容的方法就没必要介绍了,大家记住以上三点解决float浮动清除浮动方法。但这里推荐第三点和第二点解决清除浮动方法。

相信阅读了这篇文章你已经万全了解了浮动这个属性,有需要的朋友可以保存一下,也请大家持续关注本站的其他更新。

相关阅读:

为什么HTML网页乱码与解决方法

HTML里的checkbo怎么使用

HTML里的命名规则

清除浮动指什么? 如何清除浮动?

HTML清除浮动的方法步骤如下:

1、首先,制作一个简单的HTML页面,找到父级元素,将父级元素添加上边框;

2、然后,将父级元素添加上边框后,发现父级元素没有被子元素的高度所撑开,保持标签的高度;

3、在HTML页面上,将最后一个浮动元素的后面添加上div,设置其类型为clearboth;

4、设置完成后,将浮动元素的父级元素添加上伪类,添加成功后,HTML即可清除浮动。

清除浮动指什么? 如何清除浮动?

HTML清除浮动的方法步骤如下:

1、首先,制作一个简单的HTML页面,找到父级元素,将父级元素添加上边框;

2、然后,将父级元素添加上边框后,发现父级元素没有被子元素的高度所撑开,保持标签的高度;

3、在HTML页面上,将最后一个浮动元素的后面添加上div,设置其类型为clearboth;

4、设置完成后,将浮动元素的父级元素添加上伪类,添加成功后,HTML即可清除浮动。

什么是浮动以及浮动的清除方法

本章给大家介绍什么是浮动以及浮动的清除方法。有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

一、浮动

说浮动就必须提及一下文档流,HTML当中的元素按照从左到右,从上到下的顺序进行排列称之为文档流,也就是正常排列。

而浮动是什么呢?浮动会让元素脱离文档流,假如A元素浮动了,原本排在该元素之后的元素发现A元素不在这个文档流了,就会无视它往上接到A元素前面的元素之后(PS:但是文字并不会无视它,还会环绕A元素,也就是A元素没有脱离文字流。

而如果使用position的绝对定位会连文字流也脱离文档流。

浮动的好处当然是布局了,例如通过浮动来形成三列布局,文字环绕等等。但是浮动也有一个问题,那就是会导致高度的塌陷,就像上面的图片显示,父元素的高度塌陷了,并没有将浮动的子元素包裹进去,这样子就会造成布局上的错误。

二、BFC

什么是BFC?BFC是Block Formatting Context的缩写,也就是块级格式化上下文,创建BFC有以下情况:

float的值不为none。

overflow的值不为visible。

display的值为table-cell, table-caption, inline-block中的任何一个。

position的值不为relative和static。

BFC的特性就是包裹浮动的元素。按照我的理解,当你创建BFC之后元素就会把里面的东西视为自己的东西,包括浮动元素,然后创建一个私有领域给包裹进来。此外BFC还有还有如下特性。

1.让原本会叠加的上下外边距叠加无效。将想要边距失效的两个盒子分别放入一个父盒子,然后为父盒子创建BFC。

2.创建BFC的元素将不会围绕浮动元素,图中文字用p标签包裹并创建BFC,右上角浮动元素,可以看见文字并没有环绕浮动元素。

三、 清除浮动的方法

清除浮动方法大致有两类,一类是clear:both | left | right ,另一类则是创建BFC,细分又可以分为多种。

1.通过在浮动元素末尾添加一个空的标签例如并设置样式为clear:both | left | right ,其他标签br等亦可。

<div class="parent">

<div class="child"></div>

<div style="clear: both;"></div>

</div>优点:简单。

缺点:增加了额外的标签,并且很显然这并不符合语义化。

*使用 br标签和其自身的 html属性,br 有 clear=all | left | right | none;的属性。

<div class="parent">

<div class="child"></div>

<br clear='all'>

</div>优点:简单代码量少,比空标签语义化稍好。

缺点:增加了额外的标签,并且很显然这并不符合语义化。

2.使用::after伪元素(万金油方法)

ps:由于IE6-7不支持:after,使用`zoom:1触发hasLayout。其实是通过 content 在元素的后面生成了内容为空的块级元素

代码如下:

.clearfix:after {

content:"";

display:block;

height:0;

visibility:hidden;//这一条可以省略,证明请看原文精益求精部分

clear:both;

}.clearfix {

zoom:1;

}优点:结构和语义化完全正确,代码量居中。

缺点:复用方式不当会造成代码量增加。

伪元素还有一种写法:

// 用display:table 是为了避免外边距margin重叠导致的margin塌陷, 内部元素默认会成为 table-cell 单元格的形式

.clearfix:before, .clearfix:after { content:""; display:table;}

.clearfix:after{ clear:both; overflow:hidden;}

.clearfix{ zoom:1; }3.父元素设置 overflow:hidden,(PS:在IE6中还需要触发 hasLayout ,例如 zoom:1)

优点:不存在结构和语义化问题,代码量极少。

缺点:由于hidden的原因,当内容增多时候容易造成不会自动换行导致内容被隐藏掉,无法显示需要溢出的元素,还会导致中键失效(鼠标中键)。

4.父元素设置 overflow:auto 属性

优点:同上

缺点:多个嵌套后,会有bug,详情看原文。

5.父元素也浮动

优点:代码少

缺点:总不能一直浮动到body吧。

6.父元素设置display:table

优点:结构语义化完全正确,代码量极少。

缺点:会造成盒模型的改变。

CSS清除float浮动的常用几种方法

本篇文章给大家带来的内容是关于css中flaot浮动的原因及带来的问题分析 ,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

flaot浮动的原因与副作用

float中的四个参数

left,right,none,inherit

float 浮动的原因

使用浮动之后,元素会脱离标准的文档流。(标准的文档流就是按照不同的元素种类,如块元素,行元素按照各自的特点去排列显示,虽然属性不同,但都是按照从上到下,从左到右的顺序进行排列)

float 浮动的副作用

  • 两个块级元素,会被浮动元素覆盖
    这里写图片描述

  • <style type="text/css"> .box{ border: 4px solid #000000; width: 200px; height: 200px; display: inline-block; } .itemSmall_1{ background-color: chartreuse; width: 40px; height: 40px; border: 2px solid #000000; /* float: left; */ } .itemSmall_2{ background-color: chartreuse; width: 40px; height: 40px; border: 2px solid #000000; float: left; } .itemBig{ background-color: blue; width: 150px; height: 150px; border: 2px solid #000000; } </style><body> <div class="box"> <div class="itemSmall_1"> </div> <div class="itemBig"> </div> </div> <div class="box"> <div class="itemSmall_2"> </div> <div class="itemBig"> </div> </div> </body>

    *一个块元素,一个行内元素。行内元素如文字会浮动在浮动元素的周围,为浮动元素留出空间。
    这里写图片描述

    <style type="text/css"> .box{ border: 4px solid #000000; width: 200px; height: 200px; display: inline-block; vertical-align: top; } .itemSmall_1{ background-color: chartreuse; width: 40px; height: 40px; border: 2px solid #000000; /* float: left; */ } .itemSmall_2{ background-color: chartreuse; width: 40px; height: 40px; border: 2px solid #000000; float: left; } .itemBig{ background-color: blue; width: 150px; height: 150px; border: 2px solid #000000; } </style> <body> <div class="box"> <div class="itemSmall_1"> </div> <div class="itemBig"> </div> </div> <div class="box"> <div class="itemSmall_2"> </div> 行内元素行内元素行内元素行内元素行内元素行内元素行内元素行内元素行内元素行内元素行内元素行内元素行内元素行内元素行内元素行内元素 </div> </body>

    *两个块级元素浮动,出现父元素塌缩
    这里写图片描述

    <style type="text/css"> .box{ border: 4px solid #000000; float: left; } .itemSmall_2{ background-color: chartreuse; width: 40px; height: 40px; border: 2px solid #000000; float: left; } .itemBig2{ background-color: blue; width: 150px; height: 150px; border: 2px solid #000000; float: left; } </style> <body> <div class="box"> <div class="itemSmall_2"> </div> <div class="itemBig2"> </div> </div> </body>

    CSS清除float浮动的常用几种方法

    本篇文章给大家带来的内容是关于css中flaot浮动的原因及带来的问题分析 ,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

    flaot浮动的原因与副作用

    float中的四个参数

    left,right,none,inherit

    float 浮动的原因

    使用浮动之后,元素会脱离标准的文档流。(标准的文档流就是按照不同的元素种类,如块元素,行元素按照各自的特点去排列显示,虽然属性不同,但都是按照从上到下,从左到右的顺序进行排列)

    float 浮动的副作用

  • 两个块级元素,会被浮动元素覆盖
    这里写图片描述

  • <style type="text/css"> .box{ border: 4px solid #000000; width: 200px; height: 200px; display: inline-block; } .itemSmall_1{ background-color: chartreuse; width: 40px; height: 40px; border: 2px solid #000000; /* float: left; */ } .itemSmall_2{ background-color: chartreuse; width: 40px; height: 40px; border: 2px solid #000000; float: left; } .itemBig{ background-color: blue; width: 150px; height: 150px; border: 2px solid #000000; } </style><body> <div class="box"> <div class="itemSmall_1"> </div> <div class="itemBig"> </div> </div> <div class="box"> <div class="itemSmall_2"> </div> <div class="itemBig"> </div> </div> </body>

    *一个块元素,一个行内元素。行内元素如文字会浮动在浮动元素的周围,为浮动元素留出空间。
    这里写图片描述

    <style type="text/css"> .box{ border: 4px solid #000000; width: 200px; height: 200px; display: inline-block; vertical-align: top; } .itemSmall_1{ background-color: chartreuse; width: 40px; height: 40px; border: 2px solid #000000; /* float: left; */ } .itemSmall_2{ background-color: chartreuse; width: 40px; height: 40px; border: 2px solid #000000; float: left; } .itemBig{ background-color: blue; width: 150px; height: 150px; border: 2px solid #000000; } </style> <body> <div class="box"> <div class="itemSmall_1"> </div> <div class="itemBig"> </div> </div> <div class="box"> <div class="itemSmall_2"> </div> 行内元素行内元素行内元素行内元素行内元素行内元素行内元素行内元素行内元素行内元素行内元素行内元素行内元素行内元素行内元素行内元素 </div> </body>

    *两个块级元素浮动,出现父元素塌缩
    这里写图片描述

    <style type="text/css"> .box{ border: 4px solid #000000; float: left; } .itemSmall_2{ background-color: chartreuse; width: 40px; height: 40px; border: 2px solid #000000; float: left; } .itemBig2{ background-color: blue; width: 150px; height: 150px; border: 2px solid #000000; float: left; } </style> <body> <div class="box"> <div class="itemSmall_2"> </div> <div class="itemBig2"> </div> </div> </body>

    如何使用CSS清除浮动的方法

    这篇文章主要介绍了关于如何使用CSS清除浮动的方法,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下

    在各种浏览器中显示效果也有可能不相同,这样让清除浮动更难了,下面总结8种清除浮动的方法,测试已通过 ie chrome firefox opera,需要的朋友可以参考下

    清除浮动是每一个 web前台设计师必须掌握的机能。css清除浮动大全,共8种方法。

    浮动会使当前标签产生向上浮的效果,同时会影响到前后标签、父级标签的位置及 width height 属性。而且同样的代码,在各种浏览器中显示效果也有可能不相同,这样让清除浮动更难了。解决浮动引起的问题有多种方法,但有些方法在浏览器兼容性方面还有问题。

    下面总结8种清除浮动的方法(测试已通过 ie chrome firefox opera,后面三种方法只做了解就可以了):

    1,父级p定义 height

    <style type="text/css">

    .p1{background:#000080;border:1px solid red;/*解决代码*/height:200px;}

    .p2{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>

    <p class="p1">

    <p class="left">Left</p>

    <p class="right">Right</p>

    </p>

    <p class="p2">

    p2

    </p>原理:父级p手动定义height,就解决了父级p无法自动获取到高度的问题。

    优点:简单、代码少、容易掌握

    缺点:只适合高度固定的布局,要给出精确的高度,如果高度和父级p不一样时,会产生问题

    建议:不推荐使用,只建议高度固定的布局时使用

    2,结尾处加空p标签 clear:both

    <style type="text/css">

    .p1{background:#000080;border:1px solid red}

    .p2{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>

    <p class="p1">

    <p class="left">Left</p>

    <p class="right">Right</p>

    <p class="clearfloat"></p>

    </p>

    <p class="p2">

    p2

    </p>原理:添加一个空p,利用css提高的clear:both清除浮动,让父级p能自动获取到高度

    优点:简单、代码少、浏览器支持好、不容易出现怪问题

    缺点:不少初学者不理解原理;如果页面浮动布局多,就要增加很多空p,让人感觉很不好

    建议:不推荐使用,但此方法是以前主要使用的一种清除浮动方法

    3,父级p定义 伪类:after 和 zoom

    <style type="text/css">

    .p1{background:#000080;border:1px solid red;}

    .p2{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>

    <p class="p1 clearfloat">

    <p class="left">Left</p>

    <p class="right">Right</p>

    </p>

    <p class="p2">

    p2

    </p>原理:IE8以上和非IE浏览器才支持:after,原理和方法2有点类似,zoom(IE转有属性)可解决ie6,ie7浮动问题

    优点:浏览器支持好、不容易出现怪问题(目前:大型网站都有使用,如:腾迅,网易,新浪等等)

    缺点:代码多、不少初学者不理解原理,要两句代码结合使用才能让主流浏览器都支持。

    建议:推荐使用,建议定义公共类,以减少CSS代码。

    4,父级p定义 overflow:hidden

    <style type="text/css">

    .p1{background:#000080;border:1px solid red;/*解决代码*/width:98%;overflow:hidden}

    .p2{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>

    <p class="p1">

    <p class="left">Left</p>

    <p class="right">Right</p>

    </p>

    <p class="p2">

    p2

    </p>原理:必须定义width或zoom:1,同时不能定义height,使用overflow:hidden时,浏览器会自动检查浮动区域的高度

    优点:简单、代码少、浏览器支持好

    缺点:不能和position配合使用,因为超出的尺寸的会被隐藏。

    建议:只推荐没有使用position或对overflow:hidden理解比较深的朋友使用。

    5,父级p定义 overflow:auto

    <style type="text/css">

    .p1{background:#000080;border:1px solid red;/*解决代码*/width:98%;overflow:auto}

    .p2{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>

    <p class="p1">

    <p class="left">Left</p>

    <p class="right">Right</p>

    </p>

    <p class="p2">

    p2

    </p>原理:必须定义width或zoom:1,同时不能定义height,使用overflow:auto时,浏览器会自动检查浮动区域的高度

    优点:简单、代码少、浏览器支持好

    缺点:内部宽高超过父级p时,会出现滚动条。

    建议:不推荐使用,如果你需要出现滚动条或者确保你的代码不会出现滚动条就使用吧。

    6,父级p 也一起浮动

    <style type="text/css">

    .p1{background:#000080;border:1px solid red;/*解决代码*/width:98%;margin-bottom:10px;float:left}

    .p2{background:#800080;border:1px solid red;height:100px;width:98%;/*解决代码*/clear:both}

    .left{float:left;width:20%;height:200px;background:#DDD}

    .right{float:right;width:30%;height:80px;background:#DDD}

    </style>

    <p class="p1">

    <p class="left">Left</p>

    <p class="right">Right</p>

    </p>

    <p class="p2">

    p2

    </p>原理:所有代码一起浮动,就变成了一个整体

    优点:没有优点

    缺点:会产生新的浮动问题。

    建议:不推荐使用,只作了解。

    7,父级p定义 display:table

    <style type="text/css">

    .p1{background:#000080;border:1px solid red;/*解决代码*/width:98%;display:table;margin-bottom:10px;}

    .p2{background:#800080;border:1px solid red;height:100px;width:98%;}

    .left{float:left;width:20%;height:200px;background:#DDD}

    .right{float:right;width:30%;height:80px;background:#DDD}

    </style>

    <p class="p1">

    <p class="left">Left</p>

    <p class="right">Right</p>

    </p>

    <p class="p2">

    p2

    </p>原理:将p属性变成表格

    优点:没有优点

    缺点:会产生新的未知问题。

    建议:不推荐使用,只作了解。

    8,结尾处加 br标签 clear:both

    <style type="text/css">

    .p1{background:#000080;border:1px solid red;margin-bottom:10px;zoom:1}

    .p2{background:#800080;border:1px solid red;height:100px}

    .left{float:left;width:20%;height:200px;background:#DDD}

    .right{float:right;width:30%;height:80px;background:#DDD}

    .clearfloat{clear:both}

    </style>

    <p class="p1">

    <p class="left">Left</p>

    <p class="right">Right</p>

    <br class="clearfloat" />

    </p>

    <p class="p2">

    p2

    </p>原理:父级p定义zoom:1来解决IE浮动问题,结尾处加 br标签 clear:both

    建议:不推荐使用,只作了解。

    博科教育还为您提供以下相关内容希望对您有帮助:

    Css—float的影响和解决方案

    推荐俩种依靠clear属于清除浮动的方法,推荐第二种,探究的记录在后面,赶时间的看个开头就好了。 1. 在受浮动坍塌的父级元素结束标签前,添加一个高宽为0的空div,然后设置 clear:both 2 .创建一个clearfix样式,并...

    浮动元素的特征、影响以及如何清理浮动、

    反方向的浮动元素:互不影响,位于同一条水平线上,当空间不够时会被挤下 4、对子元素的影响 当一个元素浮动时,在没有清除浮动的情况下,它无法撑开其父元素,但它可以让自己的浮动子元素撑开它自身,并且在没有定义具...

    CSS中为什么overflow:hidden能清楚浮动float的影响

    1、有宽度高度值,显示为溢出 2、无宽度高度值,就会被撑开(因为没有分离父子),加了”float:left;“ 浮动分离了父子元素,而且又没有overflow:hidden强制达到“让子元素只在父元素内显示”的效果,所以不撑开,反而...

    CSS浮动和清除浮动?

    清除浮动并不是指清除浮动元素本身的浮动,而是在浮动元素的外面(前面或后面)进行清除,也就是清除浮动元素对其他后续元素的影响。浮动元素相当于漂浮在空中,那么它原来在地面所占用的位置就被收回了,后面的其他元素就会自动...

    css的浮动以及如何清除浮动

    CSS清除浮动的3种方法,参考:http://www.apiref.com/css-zh/experience/skill.htm#no9 方法1:test{clear:both;} test为浮动元素的下一个兄弟元素 方法2:test{display:block;zoom:1;overflow:hidden;} test为浮动...

    清除浮动的方法有哪些

    接下来在文章中将为大家详细介绍几种清除浮动的方法,具有一定的参考价值,希望对大家有所帮助。【推荐课程:CSS课程】浮动导致的后果:(1)由于浮动元素脱离了文档流,所以父元素的高度无法被撑开,影响了与父元素同级的元素...

    html5中float属性造成的换行如何处理

    由于各个浏览器在样式方面都有一些差异,还有一种情况就是,向右浮动的元素宽度不够时也会出现换行的问题,这个时候只要修改宽度就可以解决。 接下来总结一下查资料过程中学到的float属性相关特点: (1)float在css中属于一种...

    html为什么要清除浮动html为什么一定要清除浮动

    html5为什么要清除浮动 推荐的浮点代码是:在css文件中定义下面的类 。clearFloat:在{ 可见性:隐藏;明确:两者都有;显示:块;高度:0px 内容:} 用法如下 ""html图片浮动后怎么居中?在父元素上设置text-align属性为center...

    CSS里怎么清除浮动

    特别是上下边的padding和margin不能正确显示。三、css解决浮动,清除浮动方法 这里为了统一讲解浮动解决方法,假设了有三个盒子对象,一个父级里包含了两个子级,子级一个使用了float:left属性,另外一个子级使用float:right...

    float:left表示什么,可以用什么进行终止

    表示向左浮动,比如多个div在一个页面上,默认情况是:一行一个div,但是只要在div的css中使用float:left,可以使一行有多个div,这样可以把网页划分成很多块,但是使用该属性会影响后面的元素,所有如果后面的div不想再被...

    显示全文

    猜你还关注