CSS:利用浮动实现多个盒子并排

浮动

浮动：
浮动(float)是css样式的一个定位属性，可以使元素脱离正常文档流并浮动在它父容器的左侧或者右侧。
float设置元素在水平浮动，意味着只能左右浮动而不能上下浮动。
注意事项：
（1）要浮动，并排的盒子都要设置浮动
（2）父盒子要有足够的宽度，否则盒子会掉下去

浮动实现盒子并排

首先，绘制一个600px*600px（指的是内容区域的大小）大小的盒子，大盒子里面容纳三个大小都为200px *200px但背景颜色不同的盒子：

代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.main{width: 600px;height: 600px;border: 2px gray solid ;}.main .box1{width: 200px;height: 200px;background-color: red;}.main .box2{width: 200px;height: 200px;background-color: blue;}.main .box3{width: 200px;height: 200px;background-color: orange;}</style>
</head><body><div class="main"><div class="box1"></div><div class="box2"></div><div class="box3"></div></div></body>
</html>

结果：

此时三个盒子是垂直排列的，我们可以利用浮动来设置盒子的并排，三个子盒子的样式都要设置浮动：

结果如下：
如果没有三个子盒子都设置浮动，比如子盒子box2没有设置浮动：

代码：

结果：
没有设置浮动的子盒子box2（蓝色方块）钻到红色方块底下去了

按住F12可以出现下面的控制台：
把鼠标挪到box2的代码，可以发现box2代表的盒子钻到box1下面去了

要设置浮动，父盒子要设置足够的宽度
比如：前面我们设置父盒子的宽度刚好可以容纳三个子盒子，此时我们把父盒子的宽度改小一点：

结果：
box3盒子代表的方块会因为父盒子的宽度不够被挤到下面去，无法实现并排

浮动的顺序贴靠特性

子盒子会按照顺序进行贴靠，如果父盒子的宽度不够，不足以实现子盒子的并排，那么子盒子会寻找前一个兄弟元素进行并排
如图：父盒子因为宽度不够，所以盒子3会沿着盒子2贴靠
如果盒子2没有足够的空间，那么盒子3会试着沿盒子1贴靠，如果盒子1空间不够，那么盒子3会沿着父盒子的边框贴靠，以此类推。
例1：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.main{width: 600px;height: 600px;border: 2px gray solid ;}.main .box1{width: 300px;height: 600px;background-color: red;float: left;}.main .box2{width: 300px;height: 200px;background-color: blue;float: left;}.main .box3{width: 200px;height: 200px;background-color: orange;float: left;}</style>
</head><body><div class="main"><div class="box1"></div><div class="box2"></div><div class="box3"></div></div></body>
</html>

结果：

例2：

代码：

结果：
由于盒子2（蓝色方块）空间不够，所以盒子3（橙色方块）会沿着盒子1贴靠

浮动的元素能设置宽高

浮动的元素不再区分块级元素、行内元素，因为浮动元素已经脱离了标准文档流，所以能够设置宽度和高度，即使是span标签或a标签这样的标签也能设置宽高。
以span标签为例，没有设置浮动的span标签本身是不能设置宽高的：

结果：

右浮动

float:right
顺序是反着来的，即最先提到的子盒子，会先往右边浮动
举例：

结果:

CSS:利用浮动实现多个盒子并排相关推荐

CSS核心内容-标准流、盒子模型、浮动、定位
CSS核心内容-标准流.盒子模型.浮动.定位,了解了核心内容才能用CSS设计出一个简单的页面一.基础在了解核心内容之前需要先了解HTML中的两种标签:块级元素,行内元素: 块级元素:一个块级元素占 ...
html如何设置浮动的盒子,CSS的浮动以及盒子模型
原标题:CSS的浮动以及盒子模型 "没错,就是他." 今天我们来了解一下浮动我们之前说过div是一个块级元素单独占一行的,排版会很不方便,这就引出了我们今天要学习的内容:浮动这 ...
（12）css—float浮动样式
一.什么是浮动? 浮动是一种非常重要的布局属性. 属性名:float,漂流.浮动的意思. 属性值:left 左浮动 right 右浮动作用:让元素脱离标准流,同一级的浮动的元素可以并排在一排显示. ...
0基础快速入门CSS技术栈（6）—图解详细阐述说透CSS的浮动及应用、浮动的扩展及清除浮动和详解快速·1photoshop切图（附详细案例源码解析过程）2021-01-07更新
文章目录 1. 浮动(float)重点提炼 2. CSS 布局的三种机制 3. 为什么需要浮动? 3.1 example01 4. 什么是浮动(float) 4.1 作用 4.1.1 example0 ...
CSS的浮动与定位手把手教学
目录前言一,浮动 1.1 传统网页布局的三种方式 1.2 初步了解浮动 1.3 浮动float 1.4 浮动特性(重难点) 1.4.1 性质1: 脱标,不占位 1.4.3 性质2: 浮动元素之间的 ...
css第04天今天学习盒子摆放，大家一起学习
一.其他样式 1.圆角边框在 CSS3 中,新增了圆角边框样式,这样我们的盒子就可以变圆角了. border-radius 属性用于设置元素的外边框圆角. 语法: border-radius:len ...
html让矩形块向上浮动,CSS的浮动
CSS的浮动 1. 标准流(普通流/文档流) 标准流:标签按照规定好的默认方式排列. 块级元素独占一行,从上到下顺序排列行内元素按照顺序从左到右排列,碰到父元素边缘则自动换行标准流是最基本的布局方 ...
Css 清除浮动的几种方法
Css清除浮动的几种方法 1. 为什么添加浮动 2. 为什么清除浮动 3. 清除浮动 1) 额外标签法 2) 利用 Css 的 overflow; 3) after伪元素清除浮动 4)after.be ...
vue中的横向排列_DIV横向排列_CSS如何让多个div盒子并排同行显示
如何让多个div盒子并排同行div横向排列显示呢? 我们先设置3个div盒子对象,什么css样式都不设置看看效果.代码如下: 三个div盒子均独占一行显示 div盒子本身默认样式属性是独占一行,而解决 ...

CSS:利用浮动实现多个盒子并排

浮动

浮动实现盒子并排

浮动的顺序贴靠特性

浮动的元素能设置宽高

右浮动

CSS:利用浮动实现多个盒子并排相关推荐

最新文章

热门文章