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

雨点打透心脏的1/2处 2022-04-25 05:26 258阅读 0赞

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

CSS有一个“float”属性，默认为none，即“不浮动”，也就是在标准流中的通常情况，如果将float属性的值设置为“left”或“right”，元素就会向其父元素的左侧或右侧靠紧，同时默认情况下（没有设置width属性的情况）盒子的宽度不再伸展，而是收缩，根据盒子里面的内容的宽度来确定的。

浮动的性质比较复杂，这里先制作一个基本的页面：

[![230054707.jpg][]][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][]][230133263.jpg]

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

.son2

float:left;

可以看到，Box-2也变为根据内容确定宽度，并使Box-3的文字围绕着Box-2排列。效果图如下：

[![230158467.jpg][]][230158467.jpg]

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

.son3

float:left;

可以看到，文字所在的盒子（粉红背景）的范围，以及文字会围绕浮动的盒子排列。效果图如下：

[![230248487.jpg][]][230248487.jpg]

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

.son3

float:right;

可以看到Box-3移动到了最右端，文字段落盒子的范围没有改变，但文字变成了夹在Box-2和Box-3之间。效果图如下：

[![230311413.jpg][]][230311413.jpg]

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

[![230335137.jpg][]][230335137.jpg]

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

[![230402374.jpg][]][230402374.jpg]

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

[![230423808.jpg][]][230423808.jpg]

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

[![230446971.jpg][]][230446971.jpg]

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

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

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

[230054707.jpg]: /images/20220205/2465a0c50fc64842a6e309198c991509.png
[230133263.jpg]: /images/20220205/46f81523c16d43d484a26da994f9dad2.png
[230158467.jpg]: /images/20220205/d57b4736cb474f5897d961378800de7f.png
[230248487.jpg]: /images/20220205/590aefdc76e341d89d26419c129e6ee6.png
[230311413.jpg]: /images/20220205/87012841770a4d9f9aabfdcd250ce389.png
[230335137.jpg]: /images/20220205/710d3b990e6248ee868b8d54274e6c89.png
[230402374.jpg]: /images/20220205/41866b24d73d4d00b8932cbbf9784ccd.png
[230423808.jpg]: /images/20220205/5c86f1ba5e494167b8912160cb53042a.png
[230446971.jpg]: /images/20220205/31cab41948b043818584e74c6e8687b3.png