200字范文,内容丰富有趣,生活中的好帮手!
200字范文 > CSS中div的浮动float

CSS中div的浮动float

时间:2020-01-13 12:48:47

相关推荐

CSS中div的浮动float

------------------------------CSS中div的浮动float-----------------------------------

HTML页面的标准文档流(默认布局)是:从上到下,从左到右,遇块(块级元素)换行。浮动层:给元素的float属性赋值后,就是脱离文档流,进行左右浮动,紧贴着父元素(默认为body文本区域)的左右边框。而此浮动元素在文档流空出的位置,由后续的(非浮动)元素填充上去:块级元素直接填充上去,若跟浮动元素的范围发生重叠,浮动元素覆盖块级元素。

Float有4个值:

left :元素向左浮动。

right :元素向右浮动。

none :默认值。

inherit :从父元素继承float属性。

浮动后的div宽度会变成0,但是其内边框可能撑起它的宽和高。

代码示例:

-----------------------------------------------

-------------------------------------------------

div浮动对html元素的影响

如果浮动的div前面有同级别html元素,该浮动的div会排在html元素后面浮动,不会覆盖html元素

总结:div的浮动对前面的html元素没影响,对后面的html元素有影响。

代码示例:

-------------------------------------------------

-----------------------------------------------------------------------------------

CSS中多个div浮动

多个同级块元素同时在一个方向浮动,则从该方向上水平依次排列

-------------------------------------------------------------

-------------------------------------------------------------

CSS消除div漂浮的影响

前面div的浮动会影响后面的div的布局,如果想消除该影响可以使用clear:left | right | both

代码示例:

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。