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

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

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

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

一、页面对应的代码：

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的宽度不再伸展，而是能容纳下内容的最小宽度。效果图如下：

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

.son2

{

float:left;

}

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

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

.son3

{

float:left;

}

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

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

.son3

{

float:right;

}

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

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

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

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

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

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

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

转载于:https://blog.51cto.com/qingkechina/1261747

【CSS】【9】CSS盒子的浮动相关推荐

Web前端基础---CSS样式--盒子模型--浮动与定位
Day02 CSS样式 DIV和CSS DIV是层叠样式表中的定位技术,全称DIVision,即为划分.有时可以称其为图层. DIV元素是用来为HTML文档内大块(block-level)的内容提供结 ...
CSS面试须知--盒子模型、浮动及定位
盒子模型: 将HTML页面中的布局元素看作是一个矩形的盒子一个css盒子从外到内可以分成四个部分:margin(外边距),border(边框),padding(内边距),content(内容) 内容 ...
【CSS基础】盒子模型、浮动布局、ps切图、定位及一些零碎知识点
该系列文章是博主学习前端入门课程的笔记,同时也为了方便查阅,有任何问题都欢迎在评论区提出.本文主要介绍CSS基础知识,包括盒子模型.浮动布局.PS切图.定位.元素的显示与隐藏和一些零碎知识点思维导图 ...
web前端(2)：了解CSS和常见的属性(常用选择器+盒子模型+浮动和定位)
文章目录一.什么是CSS 二.CSS的三种样式及其优先级三.CSS基本选择器及其优先级四.其他常见的选择器五.选择器优先进阶六.css的常见属性(颜色.背景.字体.边框) 七.内间距和外间距 ...
web前端入门学习 css（5）（浮动）（ps切图）（css属性书写顺序）（学成在线网站案例）
文章目录传统网页布局的三种方式标准流(普通流.文档流) 浮动(为什么需要浮动?) 浮动特性浮动元素会脱离标准流,可以与普通流的元素相重叠如果多个盒子都设置了浮动,则它们会按照属性值一行内显示并 ...
CSS基础「四」浮动 \ 常见网页布局
本篇文章为 CSS 基础系列笔记第四篇,参考黑马程序员pink老师前端入门教程其他CSS基础相关文章: CSS基础「一」基础选择器 / 字体属性 / 文本属性 / 三种样式表 CSS基础「二」复合 ...
阿ken的HTML、CSS的学习笔记_浮动与定位（笔记六）
欢迎光临你好我是阿ken 文章目录 6.1_元素的浮动 6.1.1_元素的浮动属性 float 6.1.2_清除浮动 clear 6.2_overflow 属性 6.3_元素的定位 6.3.1_元 ...
CSS（三）：CSS特性与盒子模型
目录 CSS三大特性层叠性继承性行高的继承优先级权重的叠加盒子模型网页布局的本质盒子模型组成边框(border) 表格细线边框边框会影响盒子实际大小! 内边距(padding) p ...
CSS基础（11）- 浮动
本系列笔记是基于[渡一教育]袁进老师的html+css基础课程而记录,仅作为个人记录以及阅读使用. 文章目录浮动应用场景浮动的基本特点盒子尺寸盒子排列高度坍塌参考资料浮动视觉格式化模 ...
【Web前端HTML+CSS基础——常规流和浮动(猫眼电影项目实战)】
文章目录常规流常规流的布局浮动应用场景浮动的基本特点盒子尺寸盒子排列高度坍塌(造成网页布局样式混乱的根源) 浮动知识点练习代码: 浮动练习代码1: 浮动练习代码2: 浮动项目实战--猫 ...

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

【CSS】【9】CSS盒子的浮动相关推荐

最新文章

热门文章