美文网首页
float-浮动

float-浮动

作者: 没_有_人 | 来源:发表于2017-08-21 20:57 被阅读0次

设置float的元素,会脱离文档流,往设置的方向进行浮动,直到遇到父级的边界或者其他的浮动元素 就会停止。

浮动的元素会脱离文档流;

浮动产生的影响:

1,浮动的元素撑不开父级的高度;

2,设置浮动之后,块级元素的宽度不再跟随父级的宽度,而是由内容撑起;行级元素设置浮动之后,可以设置宽高尺寸以及盒模型;

3,

以正常的观点来说,我给div2,div3左浮动以后,div4 应该自动上去,但是发现了只有div4盒子上去了,但是它的文本内容也就是"div4",并没有跟随上去,这也就是浮动带来的影响,当浮动元素提升层级覆盖到没有浮动的元素的时候,没有浮动的元素的文本内容并不会被覆盖。

又比如:

一般我们用浮动的时候,相邻元素也都要用上浮动。

解决浮动带来的影响:

1,给浮动的元素的底部加入一个新的标签:设置css样式:clear :both;clear:both;只能清除上面的元素浮动带来的影响,不能清除下面的;

2,给父级设置宽高;

3,给父级设置伪元素:

(zoom:1;是兼容IE6、7的)

div{

zoom:1;

}

div::after{

content:"";

display:block;

height:0px;

clear:both;

}

相关文章

  • float-浮动

    浮动设置之处是为了适用于文字的环绕,后来发现用浮动能解决一些页面布局中的问题,就用于页面的布局上了。float可以...

  • float-浮动

    设置float的元素,会脱离文档流,往设置的方向进行浮动,直到遇到父级的边界或者其他的浮动元素 就会停止。 浮动的...

  • float-清除浮动

    1.为什么要清除浮动: CSS中的定位机制分为,文档流,浮动和绝对定位。如果对元素没有进行任何定位处理的话,元素应...

  • html5基础知识

    1:发现有个属性float含义有点奇怪,(float->浮动)啥意思? 原来是相对于父布局的位置,比如说居于父布局...

  • Python Notes

    Data type bool int/float string transforming int/float->s...

  • 02java数据类型转换

    1、自动转换 ☞发生在向上转型时,byte,short,char->int->long -> float->dou...

  • float-计算机基础

    运行结果 为什么float类型输出的数和double类型不一样? float类型可以精确表示7个十进制有效数位,后...

  • 浮动、清除浮动、闭合浮动

    1、浮动元素有什么特征?对父容器、其他浮动元素、普通元素、文字分别有什么影响? 浮动元素会脱离正常的文档流,不占据...

  • 浮动与清除浮动

    原文地址:浮动与清除浮动 浮动 浮动的概念 浮动元素会脱离文档流并向左/向右浮动,直到碰到父元素或者另一个浮动元素...

  • 浮动、清除浮动

    一、浮动属性有哪些属性值 float • left 元素向左浮动• right ...

网友评论

      本文标题:float-浮动

      本文链接:https://www.haomeiwen.com/subject/yymhdxtx.html