文章目录
- 前言
- 一、了解浮动
- 1.1 浮动的运用场景
- 1.2 浮动的基本特征
- 1.3 浮动代码及示范
- 注意事项
前言
想要学好浮动,那么盒子模型是一定要掌握的,浮动在页面布局时的使用率是非常高的,也可以说是我们前端css的一个重点了。
一、了解浮动
首先,我们要学习浮动就要知道浮动要在什么场景下来使用,它能解决哪些问题,又会给我们带来哪些问题。
1.1 浮动的运用场景
最开始,浮动是为了解决文字环绕的问题而产生的,而现在,浮动可以直接作用于页面布局,前面也说过,块盒在页面中是独占一行的,那么我们就要使用浮动来使它横向排列,来达到美化页面布局的效果。
1.2 浮动的基本特征
当一个元素浮动后,元素必定成为块盒,也就是它的display属性一定会被更改为block.
但是它们已经脱离了文本流,并不会独占一行,也就达到了块盒横向排列的需求。浮动只有两种:
左浮动:f’loat:left 元素靠上靠左浮动
右浮动:float:right 元素靠上靠右浮动
1.3 浮动代码及示范
首先我们新建一个html文件,写上三个div并分别给它们命名:
代码如下:
<div class="top"></div>
<div class="middle"></div>
<div class="button"></div>
![在这里插入图片描述](https://img-blog.csdnimg/20201121153812428.png#pic_center)
div是最典型的块盒,它没有实际的意义,就是一个盒子,一般在网页中使用也是最多的。
然后我们再分别给这三个盒子设置宽高以及背景色,这样我们才能更好的看到效果:
代码如下
代码如下(示例):
div {
width: 100px;
height: 100px;
}
.top {
background-color: red;
}
.middle {
background-color: green;
}
.button {
background-color: blue;
}
然后我们在浏览器打开:
可以很清晰的看见三个盒子在页面中是由上往下依次排列的,因为我们使用的div就是块盒,它会独占一行,而我们很多时候是需要它们在页面中横向排布,这个时候我们就需要给他们一个浮动
.top {
background-color: red;
float: left;
}
.middle {
background-color: green;
float: left;
}
.button {
background-color: blue;
float: right;
}
这里我给了红色盒子和绿色盒子左浮动,蓝色盒子右浮动,浏览器中:
可以看到红绿盒子在左边横向排列,而蓝色盒子在右边,但是它们全部都在同一行中,这就是最基本的浮动应用
注意事项
浮动盒子在父元素中排列时会避开常规流盒子,但是常规流盒子在排列时会无视浮动盒子,也就是说会被浮动盒子遮盖,因此,我们在使用浮动时就需要注意常规流盒子的布局,以免元素被遮盖。
更多推荐
菜鸟教程:浮动
发布评论