【CSS】【9】CSS盒子的浮动-阿里云开发者社区

开发者社区> 安全> 正文
登录阅读全文

【CSS】【9】CSS盒子的浮动

简介:

在标准流中,一个块级元素在水平方向会自动伸展,直到包含它的元素的边界,而在竖直方向和兄弟元素依次排列,不能并排。使用浮动方式后,块级元素的表现就会有所不同了。

   CSS有一个“float”属性,默认为none,即“不浮动”,也就是在标准流中的通常情况,如果将float属性的值设置为“left”或“right”,元素就会向其父元素的左侧或右侧靠紧,同时默认情况下(没有设置width属性的情况)盒子的宽度不再伸展,而是收缩,根据盒子里面的内容的宽度来确定的。
   浮动的性质比较复杂,这里先制作一个基本的页面:

230054707.jpg

一、页面对应的代码:
1、HTML部分代码:
<body>
    <div class="father">
         <div class="son1">Box-1</div>
         <div class="son2">Box-2</div>
         <div class="son3">Box-3</div>
         <p>法兰、拉杜与兰乔是皇家工程学院的学生,三人共居一室,结为好友。在以严格著称的学院里,兰乔是个非常与众不同的学生,他不死记硬背,甚至还公然顶撞校长“病毒”,质疑他的教学方法。他不仅鼓动法兰与拉杜去勇敢追寻理想,还劝说校长的二女儿碧雅离开满眼铜臭的未婚夫。</p>
    </div>
</body>
2、CSS部分代码:
.father
{
    background-color:#ffff99;
    border:1px solid #111111;
    padding:5px;
}

.father div
{
    padding:10px;
    margin:13px;
    border:1px dashed #111111;
    background-color:#6699FF
}

.father p
{
    border:1px dashed #111111;
    background-color:#ffbaff;
}
3、这个页面中定义了4个div,其中一个是父块,另外三个子块嵌套在它的里面,为了便于观察将各div都加了边框和背景色,此时3个子div并没有设置任何浮动属性,它们就为标准流中的盒子状态,在父块的进而面,4个子块各自向右伸展,竖直方向依次排列;
二、设置浮动
1、为第一个子div设置向左浮动
.son1
{
    float:left;
}
可以看到,标准流中的Box-2的文字在围绕着Box-1排列,而此时Box-1的宽度不再伸展,而是能容纳下内容的最小宽度。效果图如下:

230133263.jpg

2、把第二个子div设置向左浮动

.son2
{
    float:left;
}
可以看到,Box-2也变为根据内容确定宽度,并使Box-3的文字围绕着Box-2排列。效果图如下:

230158467.jpg


3、把第三个子div设置向左浮动


.son3
{


    float:left;
}


可以看到,文字所在的盒子(粉红背景)的范围,以及文字会围绕浮动的盒子排列。效果图如下:

230248487.jpg

4、将Box-3改为向右浮动

.son3
{
    float:right;
}
可以看到Box-3移动到了最右端,文字段落盒子的范围没有改变,但文字变成了夹在Box-2和Box-3之间。效果图如下:

230311413.jpg


5、此时若把浏览器窗口慢慢调整变窄,Box-2和Box-3之间的距离就会越来越小,直到二者相接触;若浏览器窗口继续调窄,浏览器窗口就无法在一行中容纳Box-1、Box-2和Box-3这3个div了,此时Box-3会被挤到下一行中,但仍保持向右浮动,这时文字会自动布满空间,如图所示:

230335137.jpg


6、若将Box-2改为向右浮动,Box-3改为向左浮动,可以看到布局没有变,但Box-2和Box-3的位置交换了。效果图如下:

230402374.jpg


三、以上均是考虑在水平上的浮动,若Box-1中增加一行,Box-3增加三行,然后把三个子div都设置为向左浮动,效果会是怎么样的呢?

230423808.jpg


浏览器窗口逐步调整变窄,结果将会如何呢?Box-3会被挤到下一行,那么它会在Box-1的下面,还是Box-2的下面呢?

230446971.jpg

从图中可以看到Box-3被挤到下一行,并向左移动,到了这Box-1的拐角处就会被卡住,从而停留在Box-2的下面。


至此,关于浮动的性质想必已理解。






     本文转自qingkechina 51CTO博客,原文链接:http://blog.51cto.com/qingkechina/1261747,如需转载请自行联系原作者


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享: