菜鸟教程：浮动

admin管理员组

文章数量:1794759

菜鸟教程：浮动

文章目录

• 前言
• 一、了解浮动
• • 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> 

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; }

这里我给了红色盒子和绿色盒子左浮动，蓝色盒子右浮动，浏览器中： 可以看到红绿盒子在左边横向排列，而蓝色盒子在右边，但是它们全部都在同一行中，这就是最基本的浮动应用

注意事项

浮动盒子在父元素中排列时会避开常规流盒子，但是常规流盒子在排列时会无视浮动盒子，也就是说会被浮动盒子遮盖，因此，我们在使用浮动时就需要注意常规流盒子的布局，以免元素被遮盖。

本文标签： 菜鸟教程