详细分析css float 属性以及position:absolute 的区别(2)

元素添加 float之后,此浮动元素会在其碰到父级元素边框或者另一个浮动元素边框,紧邻其后显示。例如下边的例子,在浮动元素总宽度大于父级元素时,换行,换行的时候遇到前一个float并在其后显示

复制代码 代码如下:


<style>
    .boxBg{
    margin: 0 auto;
    width:500px;
    height:200px;
    border:2px solid #ccc;
    }
    .box1{
    width:100px;
    height:100px;
    background-color:red;
    float:left
    }
    .box2{
    width:100px;
    height:50px;
    background-color:blue;
    float:left
    }
    .box3{
    width:400px;
    height:50px;
    background-color:green;
    float:left
    }
</style>

执行结果:

详细分析css float 属性以及position:absolute 的区别

如果使用inline-block,结果会是怎样呢?

复制代码 代码如下:


<style>
    .boxBg{
    margin: 0 auto;
    width:500px;
    height:200px;
    border:2px solid #ccc;
    }
    .box1{
    width:100px;
    height:100px;
    background-color:red;
    display:inline-block
    }
    .box2{
    width:100px;
    height:50px;
    background-color:blue;
    display:inline-block
    }
    .box3{
    width:400px;
    height:50px;
    background-color:green;
    display:inline-block
    }
</style>

执行结果:

详细分析css float 属性以及position:absolute 的区别

此时框3是另起一行而不是跟在框1之后,(1,2之间的缝隙这里就不说了) 这也是一个使用inline-block和float的判断,如果模块宽度不一样使用float排版可能会导致跟预想结果不一样,所以在宽高不变的情况下使用float是极好的,如果不一致的话需要看具体的布局,使用恰当的属性。

以下贴代码,只贴修改的部分,其他不变,结构不变。

如果去掉box3的float:left会是什么结果?按照理解,浮动元素不占据空间,也就是框框3会无视框框1,框框2直接紧邻父元素的边框显示,也就是框框1会盖住框框3?那结果呢?

复制代码 代码如下:


.box3{
    width:100px;
    height:50px;
    background-color:green;
}

执行结果:

详细分析css float 属性以及position:absolute 的区别

为何框3的文字会出现在下边而不是被框1覆盖?接着看代码,看图

复制代码 代码如下:


.box3{
    height:50px;
    background-color:green;
}

执行结果:

详细分析css float 属性以及position:absolute 的区别

看出不一样了没?是的。box3没有定义width;去掉了width,不定义宽度的情况下默认宽度就是父元素的宽度,也就是说此时width:500px;浮动元素覆盖非浮动元素,也就是框3前边200px的宽度被浮动元素覆盖了,之所以文字没有被覆盖而且文字被浮动元素挤在200px之后的位置,原因呢?

浮动元素不会占据块的空间,所以框三就是100%的父容器宽度 500px,但是浮动元素会占据另外的空间,也就是行框空间,通俗的讲就是文本所占的空间。

这也是图片float之后,文本会自动环绕图片的原因。浮动元素不占据块级空间,但会影响块级元素之内的文字以及内联元素。

如此的话如果想要三个框宽度一样,那么只需要将框三width:300px;

复制代码 代码如下:


.box3{
    width:300px;
    height:50px;
    background-color:green;
}

执行结果:

详细分析css float 属性以及position:absolute 的区别

到这里基本的浮动说完了,那就要说说问题了,浮动虽然好用,但是也会在实际中出现很多问题。例如:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wzzpwx.html