CSS/CSS3 | xx-浮动float简介<01>

digking
366 阅读6分钟

type: synchronization

1. 概念

  • 浮动(英语:float)
  • 是指元素设置float属性时的状态,特征

通过浮动可以使一个元素向其父元素的左侧或者右侧移动。

2. 设置浮动

可以使用float属性来设置元素的浮动

格式:

float: [可选值] ;

实例:

float: left ;

可选值有:

  • none: 默认值,元素不浮动
  • left: 元素向左浮动
  • right: 元素向右浮动

3. 理解浮动

把设置了浮动的元素想象成浮在水中的漂浮物(落叶)

image

注意事项:

  • 元素设置浮动后,水平布局就不需要满足 「约束等式」
  • 元素设置浮动后,会完全从文档流中脱离,不再占用文档流的位置。所以如果设置浮动的元素下有一个在文档流中的元素B(没有设置浮动),则这个元素B会自动向上移动。

4. 案例演示

🎈演示文档流

▶D1-编写单个没有设置浮动的块级元素在页面中的布局。

(HTML):

 <div class="box1"></div>

(CSS):

.box1{
    background-color: #bfa;
    width: 200px;
    height: 200px;
    float: left;
}

效果:

image

红色线表示浏览器边界

分析布局:

没有设置浮动的块级元素的布局是满足那个约束等式的,即 那7个值相加 = 父元素内容区大小。

而这个元素没有设置auto,所以margin-right会自动调整满足这个等式。

关于这个等式和计算相关知识可以看盒子模型: www.runoob.com/css/css-box…

猜想: margin-right应该等于 「父元素内容区大小 - 可见大小」

查看父元素body标签,宽度为853px

image

查看div元素,宽度为 200px

image

根据等式黄色区域就是剩余的约束值 = 853 - 200 = 653px

注意: 在这里的效果不论是块元素还是行内元素都有,因为存在盒子模型约束。

但是不知什么原因,使用的像素测量尺总是实际设置的像素值的2倍

即 div设置的宽为200px,而用测量尺测量是400px,可能是没有设置好?

通过上述栗子,可以了解盒子模型布局的基本原理。

▶D2-编写两个没有设置浮动的块级元素在页面中的布局。

(HTML):

<div class="box1"></div>
<div class="box1"></div>

(CSS):

.box1{
    background-color: #bfa;
    width: 100px;
    height: 100px;
    margin: 10px  10px;

}
.box2{
    background-color: rgb(248, 219, 51);
    width: 200px;
    height: 200px;

}

效果:

image

很明显的发现,两个div元素前后排列

没有设置浮动的div(块级元素)的排列布局是默认按照元素编写的顺序,由上到下独立一行。

🎈演示浮动

▶D4-编写两个块级元素其中一个元素设置浮动的布局。

(CSS):

.box1{
    background-color: #bfa;
    width: 100px;
    height: 100px;
    margin: 10px  10px;
    float: left;   /*  新增设置浮动*/
}
.box2{
    background-color: rgb(248, 219, 51);
    width: 200px;
    height: 200px;

}

效果:

image

效果: 似乎黄色块被绿色块给压住了( 绿色块把黄色块压住了 )

分析原因:

这个案例的结构是

未设置浮动的div

设置浮动left的div

未设置浮动的黄色div还在文档流中,而设置了浮动的绿色div脱离文档流,不占据位置,这样就会造成未设置浮动的黄色div会向前移动到原先绿色div的位置。

🔈就像排队,前面一个人「飞走了」,后面人自然往前移动。

▶D5-编写三个块级元素其中设置浮动的布局。

(HTML):

<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>

(CSS):

.box1{
    background-color: #bfa;
    width: 100px;
    height: 100px;
    margin: 10px  10px;
    /* float: left; */
}
.box2{
    background-color: rgb(248, 219, 51);
    width: 200px;
    height: 200px;
    margin: 10px  10px;
}
.box3{
    background-color: rgb(51, 97, 248);
    width: 200px;
    height: 200px;
    margin: 10px  10px;

}

未设置浮动时:

image

当给黄色,蓝色块设置浮动时:

image

现象:设置了浮动left的元素黄色块和蓝色块从原本垂直排列变为水平排列,而且不超过上面的绿色div。

分析:设置浮动的(块)元素会脱离文档流,失去一些元素原本在文档流中的特性(独占一行),所以原本独占一行的两个块,现在在同一行。但由于绿色块没有设置浮动,所以是文档流中的div,还具有相应的特性(独占一行,占据位置)。

▶D6-编写三个块级元素div都浮动,调整浏览器窗口大小观察效果。

(CSS):

.box1{
    background-color: #bfa;
    width: 200px;
    height: 100px;
    margin: 10px  10px;
    float: left;
}
.box2{
    background-color: rgb(248, 219, 51);
    width: 400px;
    height: 100px;
    margin: 10px  10px;
    float: left;
}
.box3{
    background-color: rgb(51, 97, 248);
    width: 100px;
    height: 100px;
    margin: 10px  10px;
    float: left;

}

同样三个div,设置浮动后效果:

image

效果: 在同一行,水平自左向右排列

分析: 由于设置浮动是left,所以会按照编写顺序,绿色,黄色,蓝色依次排列

让我们调整(缩小)浏览器框到一个范围时:

a. 当浏览器视窗大小容不下三个块时,第三个(最后一个)最自动换行

image

b. 当浏览器视窗大小容不下两个块时,第二个也会自动换行

image

Q: 为什么明明绿色块的右边有一大块空间,但是蓝色的块不上去?

A: 因为这三个元素都设置了浮动,而且是按照先后顺序的,所以这个空白看起来是空白,没有被占据,实际上,这是属于黄色块的空间,只是当前窗口效果看起来有空闲的位置,蓝色块是被黄色块给「挡住」了,所以不能「上去」。

这样的话,如果把蓝色和黄色调换一个位置的话,蓝色就会上去

<div class="box1"></div>
<div class="box3"></div>  <!--  将box2和box3调换位置   -->
<div class="box2"></div>

调换后的效果:

image

整个测试过程gif:

image

都设置浮动的元素,当窗口宽度变化,容纳不下元素时,会自动换行,这个现象就像写文档,一行写不下编辑器也会「自动换行」。但这个换行只是视觉上的,本质还是在一行。

5. 为什么有浮动

浮动最开始是用于文字环绕效果的,后来可以用来布局。

image

6. 浮动的特点

由于浮动对于页面布局有很大的影响,本身也很麻烦,所以需要总结一些浮动相关的特性,特点,当做结论记忆即可

浮动的特点(:

  1. 浮动元素会完全脱离文档流,不再占据文档中的位置。 【见D4】
  2. 设置浮动的元素会向父元素的左侧或者右侧移动 【见D5】
  3. 浮动元素默认不会从父元素中移出。 【见D5】
  4. 浮动元素向左或向右移动时,不会超过前面的元素。【见D5】
  5. 如果一个浮动元素的前面元素是非浮动元素(块元素),则浮动元素无法上移动。 【见D5】
  6. 浮动元素不会超过其上面的浮动的兄弟元素,最多和其一样高。 【见D6】

小结:

  • 浮动的作用从效果上是为了让页面中的元素从垂直排列变为水平排列。
  • 通过浮动可以制作水平方向上的布局效果。

(完)

学习就是不断的熟悉,了解 从陌生到熟悉,再到了如指掌

本文使用 文章同步助手 同步

avatar
文章
阅读
粉丝