浮动导致布局变动

发布时间:2016-12-19 12:04:37编辑:www.fx114.net 分享查询网我要评论
本篇文章主要介绍了"浮动导致布局变动 ",主要涉及到浮动导致布局变动 方面的内容,对于浮动导致布局变动 感兴趣的同学可以参考一下。

float: none | left | right | inherit

none:默认值,即不浮动

left:向页面的左侧浮动

right:向页面的右侧浮动

inherit:继承父元素的float值(一般不建议使用inherit,ie不支持这个选项)

重点:

1、对于块级元素来说,在不设置宽度的情况系,默认的宽度是100%,一旦设置了浮动,它的宽度就会根据内容进行自动调整。

2、设置了浮动的元素会脱离正常的文档流,我们可以这样理解:设置浮动后,元素不仅在Y轴上浮动起来,在Z轴上,也浮动起来。默认情况下,父元素的高度会根据子元素的内容进行调整,而如果我们将子元素设置为浮动,父元素的高度就会变为0。

3、虽然浮动的元素脱离了文档流,但是里面的内容仍然占据空间,会根据相对位置进行布局。

这里举个例子:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>float</title>
<style type="text/css">
    .div_float{
        border:1px solid #f00;
        float: left;
    }
    .div_none{
        border: 2px solid #090;
    }
</style>
</head>
<div class="div_float">div_float</div>
<div class="div_none">div_none</div>

</body>
</html>
View Code

效果:


上一篇:Sequence(组合数学,集合不同元素的个数)
下一篇:生产问题

相关文章

相关评论

本站评论功能暂时取消,后续此功能例行通知。

一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家社会集体的和公民的合法权益,不得利用本站制作、复制和传播不法有害信息!

二、互相尊重,对自己的言论和行为负责。

好贷网好贷款