css中浮动的使用方法-创新互联

小编给大家分享一下css中浮动的使用方法,希望大家阅读完这篇文章后大所收获,下面让我们一起去探讨吧!

创新互联公司主营阳明网站建设的网络公司,主营网站建设方案,App定制开发,阳明h5小程序定制开发搭建,阳明网站营销推广欢迎阳明等地区企业咨询

浮动是CSS中一个相对比较麻烦的属性,与之伴随的通常是清除浮动。今天我们一起来搞定浮动。

常见的用法

事实上,当我们将一个元素设置成浮动时,达到的效果如下图:

css中浮动的使用方法

这种版式相信大家都见过,很多杂志都会采用这种左边或者右边插图,文字环绕的效果。

另一种常见的浮动的用法如下图:

css中浮动的使用方法

即在某一行内,使某一部分右对齐,通常不会用margin实现,而是使用浮动。

浮动带来的问题

浮动的元素无法撑开父元素,即导致高度坍塌!!

来看下面的例子:

.container { background-color: lightblue; font-size: 0; } .son1 { display: inline-block; width: 50px; height: 50px; background-color: orange; } .son2 { width: 100px; height: 100px; float: right; background-color: lightgray; }

css中浮动的使用方法

当较大的方块浮动时,我们可以看到他无法撑开父元素。通常情况下这不是我们想要的结果,因为这会导致布局混乱。当父元素内的子元素全部浮动时尤其明显,父元素的高度会坍塌为0。

css中浮动的使用方法

清除浮动

因此,当我们用到了浮动,又不想出现这种情况的时候,就需要清除浮动。

清除浮动的方式可能有很多种,但是现在比较流行,我个人比较喜欢的方式如下:

首先,添加以下CSS:

.clearfix:after {
    content: '.';
    display: block;
    height: 0;
    visibility: hidden;
    clear: both;
}

然后,在父容器上添加clearfix类,最后代码如下:

.container { background-color: lightblue; font-size: 0; } .son1 { display: inline-block; width: 50px; height: 50px; background-color: orange; } .son2 { width: 100px; height: 100px; float: right; background-color: lightgray; } .clearfix:after { content: '.'; display: block; height: 0; visibility: hidden; clear: both; }

得到的效果如下:

css中浮动的使用方法

浮动的元素就可以撑开父容器的高度啦!

看完了这篇文章,相信你对css中浮动的使用方法有了一定的了解,想了解更多相关知识,欢迎关注创新互联网站制作公司行业资讯频道,感谢各位的阅读!


网站题目:css中浮动的使用方法-创新互联
文章URL:http://pwwzsj.com/article/hogio.html