浮动导致布局变动

发布时间:2016-12-19 12:04:37
来源:分享查询网

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

效果:

返回顶部
查看电脑版